virtualSimulation/src/views/resultsAnnounced/index.vue

<template>
    <div class="container">
         <div class="top">总分</div>
         <div class="header">
            <img
            v-if="score >= 60"
            class="pattern"
             src="@/assets/images/bg8.png"
             />
             <img
             v-else
            class="pattern"
             src="@/assets/images/bg9.png"
             />
             <img
            class="patternBig"
             src="@/assets/images/bg8.png"
             v-if="score >= 80"
             />
             <img
             v-else
            class="patternBig"
             src="@/assets/images/bg9.png"
             />
             <img
             v-if="score >= 100"
            class="pattern"
             src="@/assets/images/bg8.png"
             />
             <img
             v-else
            class="pattern"
             src="@/assets/images/bg9.png"
             />
         </div>
         <div class="mainContent">
            <div class="up">{{score}}分</div>
            <div class="down">SCORE</div>
        </div>
         <div class="bottoms">
         <div class="bottom">
            <img src="@/assets/images/bg10.png"/>
            <div class="txt">
            错误 {{ 0 }} 题
            </div>
         </div>
         <div class="bottom">
            <img src="@/assets/images/bg11.png"/>
            <div class="txt">
            {{ formattedTime  }}
            </div>
         </div><div class="bottom">
            <img src="@/assets/images/bg12.png"/>
            <div class="txt">
            100
            </div>
         </div>
        </div>
         <div class="footer">
            <button class="btn3" @click="Back">回首页</button>
            <button class="btn2" @click="Recreate">重做</button>
         </div>
    </div>
</template>


<script setup lang="ts">
import {ref,defineProps,defineEmits  } from 'vue'
import { useRouter } from 'vue-router';


// 定义 Props
const Props = defineProps({
  score: Number,
  formattedTime :String
});

// 定义自定义事件
const emit = defineEmits(['recreate']);

//去学习按钮
const Study =()=>{
    router.push('/knowledgePage')
}

//重做按钮
const Recreate=()=>{
    // 触发自定义事件，通知父组件
    emit('recreate');
}

//回首页
const router = useRouter();
const Back =()=>{
    router.push('/studyPage'); // 返回首页
}
</script>

<style lang="scss" scoped>
.container {
  width: 600px;
  height: 550px;
  background: url("@/assets/images/bg4.png") no-repeat center center;
  background-size: contain;
  padding-top: 15px;
  padding-left: 25px;
  padding-right:25px;
  position: relative; /* 添加相对定位 */
}
.top{
    color: #b6b3b3;
    font-size: 18px;
    text-align: center;
}
.header{
    height: 140px;
    margin-top: 20px;
    display: flex;
    flex-direction: row;
    gap: 30px;
    padding-left: 90px;
    padding-right: 70px;
}
.header{
    height: 140px;
    margin-top: 20px;
    display: flex;
    flex-direction: row;
    gap: 30px;
    padding-left: 90px;
    padding-right: 70px;
}
.pattern{
    width: 100px;
    height: 100px;
    margin-top: 35px;
}
.patternBig{
    width: 120px;
    height: 120px;
    margin-top: 5px;
}

.mainContent{
    display: flex;
    flex-direction: column; /* 垂直排列 */
    align-items: center;    /*水平居中 */
    margin-top: 25px;
}
.up{
    color: #fff;
    font-size: 45px;
}
.down{
    color: rgb(165, 129, 45);
    font-size: 17px;
    font-weight: bold; /* 字母加粗 */
    margin-top: 15px;
}
.bottoms{
    display: flex;
    height: 26px;
    width: 100%;
    position: absolute; /* 绝对定位 */
    bottom: 210px;
    gap: 90px;
    left: 95px;
    // left: 100px;
}
.bottom{
    display: flex;
    flex-direction: row;
}
.txt{
    color: #b8b5b5;
    font-size: 15px;
    margin-left: 8px;
    margin-top: 8px;
}
.footer{
    width: 560px;
    height: 150px;
    position: absolute; /* 绝对定位 */
    bottom: 15px; /* 置于底部 */
    display: flex;
    flex-direction: row;
    padding-left: 80px;
    gap: 150px;
}
// .btn1{
//     background: url("@/assets/images/bg5.png") no-repeat;
//     background-size: contain;
//     background-color: transparent; /* 背景颜色设置为透明 */
//     border: none; /* 移除边框 */
//     cursor: pointer; /* 鼠标悬停时显示手型 */
//     width: 120px;
//     height: auto;
//     font-size: 17px;
//     color:rgb(196, 202, 209);
//     /* 调整文字位置 */
//     padding: 10px 0 20px; /* 上内边距为 10px，下内边距为 20px */
//     display: flex; /* 使用 Flexbox 布局 */
//     align-items: flex-end; /* 文字对齐到底部 */
//     justify-content: center; /* 文字水平居中 */
// }
.btn2{
    background: url("@/assets/images/bg6.png") no-repeat;
    background-size: contain;
    background-color: transparent; /* 背景颜色设置为透明 */
    border: none; /* 移除边框 */
    cursor: pointer; /* 鼠标悬停时显示手型 */
    width: 120px;
    height: auto;
    font-size: 17px;
    color:rgb(196, 202, 209);
    /* 调整文字位置 */
    padding: 10px 0 20px; /* 上内边距为 10px，下内边距为 20px */
    display: flex; /* 使用 Flexbox 布局 */
    align-items: flex-end; /* 文字对齐到底部 */
    justify-content: center; /* 文字水平居中 */
}
.btn3{
    background: url("@/assets/images/bg7.png") no-repeat;
    background-size: contain;
    background-color: transparent; /* 背景颜色设置为透明 */
    border: none; /* 移除边框 */
    cursor: pointer; /* 鼠标悬停时显示手型 */
    width: 120px;
    height: auto;
    font-size: 17px;
    color:rgb(196, 202, 209);
    /* 调整文字位置 */
    padding: 10px 0 20px; /* 上内边距为 10px，下内边距为 20px */
    display: flex; /* 使用 Flexbox 布局 */
    align-items: flex-end; /* 文字对齐到底部 */
    justify-content: center; /* 文字水平居中 */
}
</style>