优化代码

src/components/mineSubComponent/PointsList.vue

@@ -1,6 +1,26 @@
 <template>
     <!-- 积分列表 -->
-  <div>积分列表</div>
+  <div class="points-list-container">
+    <div class="points-list-title">
+      我的积分:9999999999999999999999999999999
+    </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>
@@ -12,6 +32,7 @@ import {
   onUnmounted, // 组件销毁前执行
 } from "vue";
 const refname = ref('');
+const pointsList = ref([{},{},{},{},{},{},{},{},{},{},{},{},{},{}]);
 watch(refname, async (newQuestion, oldQuestion) => {
   // 变化后执行
 });
@@ -26,6 +47,52 @@ onUnmounted(() => {
 });
 </script>
 
-<style scoped>
-/* 样式定义 */
+<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;
+  color: @font-color;
+  font-size: 24px;
+  text-align: center;
+  line-height: 70px;
+}
+.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:@win-color;
+}
+.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>