<template>
  <div class="bank-record">
    <div class="bank-record__header">做题记录</div>
    <div class="bank-record__body">
      <div class="bank-item" v-for="(item, index) in 2" :key="index">
        <div class="bank-item__header">
          <div class="note">模拟卷</div>
          <div class="note">真题</div>
          这是最后一次做的试卷名称1
        </div>
        <div class="bank-item__body">
          <div class="list">
            <div class="exam-item" v-for="(item, index) in 2" :key="index">
              <div class="exam-item__body">
                <div class="text">
                  <span class="title">2022-05-20 17:09:00</span>
                  <span class="desc">总95题/对20题</span>
                </div>
                <div class="btns-wrap">
                  <div class="btns">
                    <div class="btn" v-if="index % 2 == 0">继续答题</div>
                    <div class="btn-line" v-if="index % 2 != 0">
                      <div class="btn-line__in">重新做题</div>
                      <div class="btn-line__in">全部解析</div>
                      <div class="btn-line__in btn-line__in--noborder">
                        做题报告
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "BankRecord",
  data() {
    return {
      activeName: "1",
    };
  },
  mounted() {},
  methods: {
    pay() {
      this.$router.push({
        path: "payment-success",
      });
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.bank-record {
  &__header {
    height: 56px;
    line-height: 56px;
    border-bottom: 1px solid #eee;
  }
  &__body {
    .bank-item {
      margin-top: 24px;

      &__header {
        height: 32px;
        line-height: 32px;
        .note {
          display: inline-block;
          margin-right: 15px;
          width: 80px;
          height: 32px;
          line-height: 32px;
          background: #3f8dfd;
          text-align: center;
          color: #fff;
          font-size: 16px;
          border-radius: 8px 0 8px 0;
        }
      }

      &__body {
        .list {
          .exam-item {
            height: 65px;
            background: #fafbfc;
            border-radius: 8px;
            overflow: hidden;
            line-height: 65px;
            border-top: 1px solid #eee;
            position: relative;

            &__body {
              .text {
                .title {
                  margin-left: 24px;
                  font-size: 16px;
                  font-family: Microsoft YaHei;
                  font-weight: 400;
                  color: #333333;
                }

                .desc {
                  margin-left: 24px;
                  color: #666;
                  font-size: 16px;
                }
              }

              .btns-wrap {
                display: table;
                position: absolute;
                right: 0;
                top: 0;
                height: 100%;
                margin-right: 20px;

                .btns {
                  display: table-cell;
                  vertical-align: middle;
                  text-align: center;

                  .btn {
                    cursor: pointer;
                    margin: 2px 0;
                    width: 122px;
                    height: 32px;
                    background: #3f8dfd;
                    border-radius: 16px;
                    display: inline-block;
                    text-align: center;
                    line-height: 32px;
                    color: #fff;
                  }

                  .btn-line {
                    width: 309px;
                    padding: 8px;
                    background: #ffffff;
                    border: 1px solid #3f8dfd;
                    border-radius: 16px;
                    display: table-cell;
                    font-size: 0;
                    line-height: 0;

                    &__in {
                      cursor: pointer;
                      display: inline-block;
                      padding: 0 15px;
                      text-align: center;
                      color: #3f8dfd;
                      border-right: 1px solid #3f8dfd;
                      font-size: 16px;
                      line-height: 16px;

                      &--noborder {
                        border: 0;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
