JingTieXueTang.H5/src/views/home/person/learn-point-rule.vue

<template>
  <div class="learn-point-rule-box">
    <van-nav-bar title="积分说明" left-arrow @click-left="onClickLeft" />
    <div>
      <div class="learn-point-rule-top">积分规则:</div>
      <div
        v-for="(item, index) in ruleList"
        :key="index"
        class="learn-point-rule-row-item"
      >
        <div class="learn-point-rule-row">
          <div class="learn-point-rule-row-icon">{{ " " }}</div>
          <div class="learn-point-rule-row-title">{{ item.name }}</div>
        </div>
        <div class="learn-point-rule-content">{{ item.content }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "learn-point-rule",
  components: {},
  data() {
    return {
      ruleList: [
        { name: "登录", content: "每日首次登录获得1积分" },
        {
          name: "今日必读",
          content: "每有效阅读一篇今日必读文章获得2积分，每日上限10积分"
        },
        {
          name: "阅读文章",
          content:
            "每有效阅读一篇非今日必读的文章获得1积分，每日上限5积分"
        },
        {
          name: "今日答题",
          content: "每答对一道今日答题获得1积分，每日上限5积分"
        },
        {
          name: "每周答题",
          content: "每答对一道每周答题获得1积分，每日上限10积分"
        },
        {
          name: "闯关答题",
          content: "全部通关获得20积分，每日上限20积分"
        },
        {
          name: "专项答题",
          content: "每答对一道专项必答的题目获得1积分，上限10积分"
        }
      ]
    };
  },
  mounted() {},
  created() { this.setLanXinNavigator(); },
  activated() {
    this.setLanXinNavigator();
  },
  methods: {
    // 设置蓝信navigator
    setLanXinNavigator() {
      lx.ui.setNavigationBarTitle({
        title: "积分说明"
      });
    },
    // 操作：返回
    onClickLeft() {
      this.$router.back();
    }
  }
};
</script>

<style lang="scss" scoped>
.learn-point-rule-box {
  width: 100%;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  font-size: 0.6rem;
  background-color: #fff;
  .learn-point-rule-top {
    padding: 0.5rem 0.5rem 0;
    font-size: 0.7rem;
  }
  .learn-point-rule-row-item {
    width: 100%;
    padding: 0 0.5rem;
    margin-top: 0.5rem;
    .learn-point-rule-row {
      display: flex;
      align-items: center;
      .learn-point-rule-row-icon {
        width: 3px;
        height: 0.6rem;
        background-color: #0088e9;
      }
      .learn-point-rule-row-title {
        font-size: 0.75rem;
        font-weight: bold;
        margin-left: 0.25rem;
      }
    }
    .learn-point-rule-content {
      margin-top: 0.25rem;
      padding-left: 0.5rem;
      color: #696969;
      word-break: break-all;
      word-wrap: break-word;
    }
  }
}
</style>