saas_pc/src/pages/person-center/my-other-bank/index.vue

<template>
  <div id="my_other_bank">
    <h2 class="title">我的题库</h2>
    <ul>
      <li v-for="(item, index) in list" :key="index" class="li_style">
        <div class="left">
          <h3>{{ item.goodsName }}</h3>
          <p>所属类型：{{ item.businessName }}</p>
          <p>总题数：{{ item.questionNum || 300 }}题</p>
          <p>
            有效期：{{
              $tools.timestampToTime(item.serviceStartTime) +
                " - " +
                $tools.timestampToTime(item.serviceEndTime)
            }}
          </p>
        </div>
        <div class="right">
          <el-button type="primary" size="small">开始做题</el-button>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        pageNum: 1,
        pageSize: 5
      },
      list: [],
      total: 0
    };
  },
  created() {
    this.getInit();
  },
  methods: {
    getInit() {
      this.$request.coursespecialquestionlist(this.formData).then(res => {
        this.list = res.rows;
      });
    }
  }
};
</script>

<style lang="scss" scoped>
#my_other_bank {
  padding: 14px 0px;
  .title {
    font-size: 20px;
    margin-bottom: 10px;
  }
  .li_style {
    padding: 14px 0px;
    display: flex;
    border-top: 1px solid #eee;
    &:last-child {
      border-bottom: 1px solid #eee;
    }
    & > .left {
      flex: 1;
      h3 {
        font-size: 16px;
      }
      p {
        margin-top: 10px;
        color: #6f6e6e;
      }
    }
    & > .right {
      width: 150px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
  }
}
</style>