Right.vue

<template>
  <div class="lession-right-wrapper flex">
    <div class="top flex">
      <div class="title">通知</div>
      <div class="content-wrapper flex">
        <div v-for="item in []" :key="item + ''" class="content flex">
          <div class="left zzz">
            啥啊啥飒哈市罚款收到回复夹寒暑假电烤炉付货款静安荟SDK复活卡开始了东航飞机好看的发
          </div>
          <div class="right">2022-9-15</div>
        </div>
      </div>
    </div>
    <div class="bottom flex">
      <div class="title">考试历史</div>
      <div class="th flex">
        <div class="left">学习课程</div>
        <div class="middle">考试时间</div>
        <div class="right">得分</div>
      </div>

      <div v-for="item in list" :key="item.courseId" class="td flex" style="">
        <div class="left zzz">{{ item.courseName }}</div>
        <div class="middle zzz" :title="item.examinationTime">
          {{ item.examinationTime }}
        </div>
        <div class="right flex">
          <div class="a">
            <!-- <span
              class="text"
              :class="{ red: item.examinationResult < item.qualifiedNum }"
              >{{
               (item.examinationResult &&item.topicNum)? Math.floor((item.examinationResult / item.topicNum) * 100):0
              }}</span
            >/<span>100</span> -->
            <span class="text">{{item.examinationResult}}</span>/<span>{{item.totalScore}}</span>
          </div>
          <div class="b flex">
            <div style="width: 60px">
              <el-progress
                :percentage="
                  Math.floor((item.examinationResult / item.totalScore) * 100)
                "
                :show-text="false"
              ></el-progress>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "lession-right",
  props: {
    list: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  data() {
    return {};
  },
  mounted(){
    console.log(this.list)
  },
  methods: {},
};
</script>
<style lang="scss" scoped>
.lession-right-wrapper {
  width: 100%;
  height: 100%;
  flex-direction: column;
  > div {
    border: 1px solid#BBBBBB;
    border-radius: 5px;
  }
  .top {
    width: 100%;
    height: 32.7%;
    margin-bottom: 23px;
    padding: 30px 19px 25px 21px;
    flex-direction: column;
    overflow: hidden;
    .title {
      font-size: 14px;
      color: #606266;
      margin-bottom: 20px;
    }
    .content-wrapper {
      flex: 1;
      width: 100%;
      overflow-y: auto;
      &::-webkit-scrollbar {
        width: 0 !important;
      }

      flex-direction: column;
      justify-content: space-between;

      .content {
        justify-content: space-between;
        width: 100%;
        font-size: 14px;
        color: #7b808a;
        .left {
          flex: 1;
          max-width: 304px;
          margin-right: 19px;
        }
        .right {
          min-width: 70px;
        }
      }
    }
  }
  .bottom {
    flex: 1;
    width: 100%;
    padding-top: 30px;
    padding-bottom: 30px;
    flex-direction: column;
    .title {
      margin-left: 21px;
      font-size: 14px;
      color: #606266;
      margin-bottom: 20px;
    }
    .th {
      width: 100%;
      height: 50px;
      background: #e8f4ff;
      justify-content: space-between;
      padding-left: 21px;
      padding-right: 25px;
      margin-bottom: 14px;
      > div {
        width: 33%;
        line-height: 50px;
        font-size: 14px;
        color: #606266;
        text-align: center;
        &.left {
          width: 40%;
        }
        &.middle {
          width: 30%;
        }
        &.right {
          width: 30%;
          text-align: center;
        }
      }
    }
    .td {
      width: 100%;
      height: 40px;
      justify-content: space-between;
      padding-left: 21px;
      padding-right: 25px;
      > div {
        line-height: 40px;
        font-size: 14px;
        color: #606266;
        text-align: center;
        &.left {
          width: 40%;
        }
        &.middle {
          width: 30%;
        }
        &.right {
          width: 30%;
          overflow: hidden;
          justify-content: space-between;
          .a {
            // width: 20px;
            // overflow: hidden;
            margin-right: 5px;
            text-align: right;
            flex: 1;
            .text {
              color: #32be0f;
              &.red {
                color: #d11414;
              }
            }
          }
          .b {
            align-items: center;
            // flex: 1;
            > div {
              width: 100%;
            }
          }
        }
      }
    }
  }
}
</style>