YNUtdPlatform/pages/YNEduApp/exam/examinationDetails.vue

<template>
  <view class="wrapper">
    <div class="arrow-left">
      <u-icon name="arrow-left" size="20" color="#fff" @click="handleArrow" />
    </div>
    <div class="result">
      <div class="result-item">{{ result }}</div>
      <div class="result-tip">最新记录</div>
    </div>

    <div class="center-container">
      <div class="top-wrapper">
        <div class="item">
          <div>{{ scoreRate }}</div>
          <div class="tip">得分率</div>
        </div>
        <div class="item">
          <div>{{ rightCount }}</div>
          <div class="tip">答对题目</div>
        </div>
        <div class="item">
          <div>{{ rightRate }}</div>
          <div class="tip">正确率</div>
        </div>
        <div class="item">
          <div>{{ answerTime }}</div>
          <div class="tip">作答用时</div>
        </div>
      </div>
      <div class="bottom-wrapper">
        <div class="item">总分：{{ totalScore }}</div>
        <div class="item">及格分：{{ passScore }}</div>
        <div class="item">考试时长：{{ duration }}分钟</div>
        <div class="item">试题：{{ questionCount }}</div>
      </div>
    </div>

    <div class="bottom-container">
      <h2 class="title">榜上有名</h2>
      <div class="title-tab">
        <div>排名</div>
        <div>姓名/部门</div>
        <div>得分</div>
        <div>得分率</div>
      </div>

      <div v-for="(item, index) in rankList" :key="index" class="rank-list">
        <div class="icon">
          <u-icon :name="iconLit[index]" size="30" />
          <u-avatar :src="item.url" size="40" />
        </div>
        <div>{{ item.name }}</div>
        <div>{{ item.score }}</div>
        <div>{{ item.scoreRate }}</div>
      </div>
    </div>

    <!-- 底部按钮 -->
    <div class="bottom-btn">
      <div class="btn">
        <u-button
          size="small"
          shape="circle"
          text="考试记录"
          style="color: #1989fa; border-color: #1989fa"
          @click="handleExamination"
        />
      </div>
      <div class="btn">
        <u-button type="primary" size="small" shape="circle" text="重新考试" />
      </div>
    </div>
  </view>
</template>

<script>
export default {
  data() {
    return {
      result: '不及格',
      // 得分率
      scoreRate: '60%',
      // 答对题目
      rightCount: 15,
      // 正确率
      rightRate: '60%',
      // 作答用时
      answerTime: '30分钟',
      // 总分
      totalScore: 100,
      // 及格分
      passScore: 60,
      // 考试时长
      duration: 120,
      // 试题
      questionCount: 100,
      iconLit: ['/static/images/top-one.png', '/static/images/top-two.png', '/static/images/top-three.png'],
      // 榜上有名 - 列表
      rankList: [
        {
          id: 1,
          name: '张三',
          url: 'https://cdn.uviewui.com/uview/album/1.jpg',
          score: 80,
          scoreRate: '80%'
        },
        {
          id: 2,
          name: '李四',
          url: 'https://cdn.uviewui.com/uview/album/1.jpg',
          score: 70,
          scoreRate: '70%'
        },
        {
          id: 3,
          name: '王五',
          url: 'https://cdn.uviewui.com/uview/album/1.jpg',
          score: 60,
          scoreRate: '60%'
        }
      ]
    }
  },
  methods: {
    handleExamination() {
      uni.navigateTo({
        url: '/pages/YNEduApp/exam/examinationList'
      })
    },
    // 重新考试
    handleResetExamination() {},
    handleArrow() {
      const from = uni.getStorageSync('from')
      uni.navigateTo({
        url: from
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.wrapper {
  height: 100vh;
  background: url('/static/images/考试详情-bg.png') no-repeat;
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  .arrow-left {
    position: fixed;
    top: 50px;
    left: 20px;
    z-index: 99;
  }

  .result {
    overflow: hidden;
    width: 180.5px;
    height: 118.6px;
    background: url('/static/images/result-bg.png') no-repeat;
    background-size: 100% 100%;
    z-index: 9;
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff;
    transform: translateY(40px);

    .result-item {
      font-size: 24px;
      font-weight: bold;
    }

    .result-tip {
      font-size: 12px;
      margin-top: 5px;
    }
  }

  .center-container {
    margin: 0 10px;
    width: calc(100% - 20px);
    height: 250px;
    background: #e8f2fe;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;

    .top-wrapper {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      align-items: center;
      margin: 0 10px;

      .item {
        margin-top: 25px;
        width: 142px;
        height: 73px;
        background: #fff;
        border-radius: 8px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-weight: 800;
        font-size: 20px;
        color: #08428d;

        .tip {
          font-weight: 400;
          font-size: 12px;
        }
      }
    }

    .bottom-wrapper {
      font-size: 12px;
      color: #a1a1a1;
      display: flex;
      justify-content: space-between;
      .item {
        margin: 0 5px;
      }
    }
  }

  .bottom-container {
    margin-top: 10px;
    width: calc(100% - 20px);
    height: 285px;
    background: #e8f2fe;
    border-radius: 20px;

    .title {
      font-weight: 800;
      font-size: 20px;
      color: #08428d;
      margin: 15px auto;
      text-align: center;
    }

    .title-tab {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 13px;
      color: #a1a1a1;
      margin: 0 10px;
      > div {
        width: 25%;
        text-align: center;
      }
    }

    .rank-list {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 13px;
      color: #333;
      margin: 20px 10px;
      > div {
        width: 25%;
        text-align: center;
      }

      .icon {
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }

  .bottom-btn {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #fff;
    padding: 10px 0;
    display: flex;
    justify-content: space-around;
    align-items: center;

    .btn {
      width: 100px;
      margin-right: 10px;
    }
  }
}
</style>