nxdt-uniapp/pages/myExam/beforeExamExplain.vue

<template>
  <view>
    <Navbar title="考前说明" />
    <div class="content">
      <div class="title">{{ item.name }}</div>
      <div class="time">{{ item.time || '' }}</div>
      <div class="item-wrapper">
        <div class="item">
          <div class="item-icon"><u-icon name="/static/images/imgs/exam.png" size="18" /></div>
          <div class="item-score">{{ item.totalScore }}分</div>
          <div class="item-total">试卷总分</div>
        </div>
        <div class="item">
          <div class="item-icon"><u-icon name="/static/images/imgs/exam2.png" size="18" /></div>
          <div class="item-score">{{ item.passScore || 0 }}分</div>
          <div class="item-total">及格分数</div>
        </div>
        <div class="item">
          <div class="item-icon"><u-icon name="/static/images/imgs/time.png" size="21" /></div>
          <div class="item-score">{{ item.examTime }}分钟</div>
          <div class="item-total">考试时长</div>
        </div>
      </div>

      <div class="sign-btn">
        <u-button type="primary" shape="circle" @click="handleAccess">进入考试</u-button>
      </div>
    </div>

    <u-modal
      :show="showModal"
      title="提示"
      :content="content"
      showCancelButton
      @confirm="confirm"
      @cancel="showModal = false"
    />
  </view>
</template>

<script>
export default {
  data() {
    return {
      item: {},
      // 是否显示弹框
      showModal: false,
      // 弹框内容
      content: '确定进入考试？'
    }
  },
  onLoad(opt) {
    this.item = JSON.parse(opt.params)
    console.log('🚀 ~ onLoad ~ opt:', this.item)
  },
  methods: {
    // 进入考试
    handleAccess() {
      this.showModal = true
    },
    confirm() {
      uni.navigateTo({
        url: '/pages/myExam/examination?params=' + JSON.stringify(this.item)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  padding: 0 20px;

  .title {
    margin: 8px 0;
    font-weight: 600;
    font-size: 18px;
    color: #000;
  }

  .time {
    font-weight: 400;
    font-size: 13px;
    color: #1989fa;
  }

  .sign-btn {
    margin: 150px auto;
    width: 100px;
  }

  .item-wrapper {
    display: flex;
    justify-content: space-between;

    .item {
      margin-top: 50px;
      width: 30%;
      height: 130px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      border-radius: 5px;
      &:nth-child(1) {
        background: #dce6fc;
      }
      &:nth-child(2) {
        background: #fbf3df;
        .item-icon {
          border: 1px solid #eaba4a;
        }
      }
      &:nth-child(3) {
        background: #e4f5de;
        .item-icon {
          border: 1px solid #2aa515;
        }
      }

      .item-icon {
        margin-bottom: 13px;
        width: 33px;
        height: 33px;
        border: 1px solid #1989fa;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .item-score {
        font-weight: 500;
        font-size: 17px;
        color: #333;
      }

      .item-total {
        font-size: 12px;
        color: #8a8a8a;
      }
    }
  }
}
::v-deep .u-modal__content {
  flex-direction: column;
  align-items: center;
}
</style>