exam_mp/pages/real/history.vue

<template>
  <Container title="往年真题">
    <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
    >
    <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 { 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: "考试",
    },
  });
};
onMounted(() => {
  userInfo.value = uni.getStorageSync("userInfo");
});
</script>

<style scoped lang="scss">
.user {
  display: flex;
  align-items: center;
  gap: 20rpx;
  padding-left: 20rpx;

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

.exam-info {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20rpx;
  padding: 20rpx;
  .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;
    }
  }
}
</style>