exam_mp/pages/real/history.vue

<template>
  <Container title="往年真题" bgColor="#f8f8f8">
    <view class="user">
      <image
        class="avatar"
        :src="userInfo.userpic"
        width="40"
        height="40"
        v-if="userInfo.userpic"
      />
      <view class="name">{{ userInfo.username }}</view>
    </view>
    <view class="exam-info">
      <view class="item">
        <view class="score">100分</view>
        <view class="title">总分</view>
      </view>
      <view class="item">
        <view class="score">100题</view>
        <view class="title">题量</view>
      </view>
      <view class="item">
        <view class="score">150分钟</view>
        <view class="title">时长</view>
      </view>
    </view>
    <view class="tip"
      >注：题型可能会含有单选题、多选题、配伍题、综合分析题；请注意考试时长，无论答题是否完全，到时自动交卷。</view
    >

    <view class="title-exam">考试记录</view>
    <view class="exam-history">
      <view
        class="i"
        :class="index !== 3 && 'no-laster'"
        v-for="(item, index) in 4"
      >
        <view>2025-05-31</view>
        <view>90分钟</view>
        <view>50/100题</view>
        <view class="score">100分<uni-icons type="right" /></view>
      </view>
    </view>
    <template #footer>
      <button @click="onClick">开始考试</button>
    </template>
  </Container>
</template>

<script setup name="history">
import { ref, onMounted } from "vue";
import Container from "../../components/Container/Container.vue";
import { getRoute, router } from "../../utils/router";

const userInfo = ref({
  userpic: "https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/uni@2x.png",
  username: "Hi, 这里是历史题库",
});

const onClick = () => {
  router.push({
    url: "/pages/real/exam",
    params: {
      title: "考试",
      id: getRoute().params.id, // 考试id
    },
  });
};
onMounted(() => {
  userInfo.value = uni.getStorageSync("userInfo");
});
</script>

<style scoped lang="scss">
@import "@/uni.scss";
.user {
  display: flex;
  align-items: center;
  gap: 20rpx;
  padding: 30rpx 20rpx;
  background: #eff4ff;
  border-radius: 24rpx;

  .avatar {
    border-radius: 50%;
    height: 96rpx;
    width: 96rpx;
  }
}

.exam-info {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20rpx;
  padding: 20rpx;
  background: #eff4ff;
  border-radius: 24rpx;
  .item {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 30rpx;
    .title {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 28rpx;
      color: #999999;
    }
  }
}

.title-exam {
  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
  font-size: 32rpx;
  color: #333333;
}

.exam-history {
  background: #fff;
  border-radius: 24rpx;
  padding: 16rpx;

  .i {
    display: flex;
    font-family: PingFang SC, PingFang SC;
    font-size: 28rpx;
    color: #333;
    align-items: center;
    justify-content: space-between;

    .score {
      color: $error;
    }
  }

  .no-laster {
    padding-bottom: 16rpx;
    margin-bottom: 8rpx;
    border-bottom: 1rpx solid #dddddd;
  }
}
</style>