<template>
    <!-- 积分列表 -->
  <div class="points-list-container">
    <div class="points-list-title">
    <img
      class="points-icon"
      src="@/assets/Points.png"
      mode="scaleToFill"
    />
    <div class="points-text">
      我的积分:
      <div class="points-alwaysnum">
        9999999999999999999999999999999
      </div>
    </div>
    </div>
    <div class="points-list" style="overflow: auto;">
    <div class="points-list-item" v-for="(item, index) in pointsList" :key="index">
      <div class="points-list-content">
        <div class="Event">
          签到增加积分
        </div>
        <div class="points-num">
          +200
        </div>
        <div class="time">
          2025-08-01 14:27
        </div>
      </div>
    </div>
  </div>

  </div>
</template>

<script setup>
import {
  ref, // 响应式基础
  watch, // 侦听器
  onMounted, // 组件挂载完成后执行
  onUpdated, // 组件更新后执行
  onUnmounted, // 组件销毁前执行
} from "vue";
const refname = ref('');
const pointsList = ref([{},{},{},{},{},{},{},{},{},{},{},{},{},{}]);
watch(refname, async (newQuestion, oldQuestion) => {
  // 变化后执行
});
onMounted(() => {
  // 组件挂载完成后执行
});
onUpdated(() => {
  // 组件更新后执行
});
onUnmounted(() => {
  // 组件销毁前执行
});
</script>

<style scoped lang="less">
.points-list-container{
  width: 100%;
  height: 100%;
}
.points-list{
  width: 100%;
  height: calc(100% - 70px);
}
.points-list-title{
  width: 100%;
  height: 70px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.points-text{
  margin-top: 10px;
  color: #666666;
  font-size: 24px;
  display: flex;
  align-items: center;
}
.points-alwaysnum{
  color: #333333;
  font-size: 24px;
  font-weight: bold;
}
.points-icon{
  width: 52px;
  height: 52px;
  margin-right: 18px;
}
.points-list-item{
  width: 100%;
  height: 60px;
  margin-top: 10px;
  margin-bottom: 10px;
  display: flex;
  justify-content:center;
  align-items: center;
}
.points-list-content{
  width: 90%;
  height: 100%;
  border-radius: 10px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color:#E0F4F1;
}
.Event{
  color: @Supplementary-text-color;
  font-size: 16px;
}
.points-num{
  color: @font-color;
  font-size: 18px;
  font-weight: bold;
}
.time{
  color:@Prompt-text-color;
  font-size: 16px;
  }
</style>