From 68301369572e873542f8522f4604714af1c28961 Mon Sep 17 00:00:00 2001
From: kron <kai_hong@126.com>
Date: Wed, 26 Nov 2025 15:09:31 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90=E9=A6=96=E9=A1=B53=E4=B8=AAt?=
 =?UTF-8?q?ab=E9=A1=B5=E7=9A=84=E7=A7=BB=E5=8A=A8=E7=AB=AF=E6=94=B9?=
 =?UTF-8?q?=E9=80=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                      |   5 +
 src/components/AppBackground.vue |  29 +-
 src/components/Container.vue     |  15 +-
 src/components/Header.vue        | 106 +-------
 src/components/Tabbar.vue        |  70 +++++
 src/pages.json                   |  18 +-
 src/pages/create.vue             |   2 +-
 src/pages/detail.vue             |   2 +-
 src/pages/edit-profile.vue       |   2 +-
 src/pages/edit.vue               |   2 +-
 src/pages/index.vue              | 450 ++++++-------------------------
 src/pages/list.vue               | 186 +++++++------
 src/pages/profile.vue            | 130 ++++-----
 src/pages/score.vue              | 394 +++++++++++++++++++++++++++
 src/static/app-bg6.png           | Bin 0 -> 8684 bytes
 src/static/tab-history-s.png     | Bin 0 -> 1336 bytes
 src/static/tab-history.png       | Bin 0 -> 820 bytes
 src/static/tab-score-s.png       | Bin 0 -> 1708 bytes
 src/static/tab-score.png         | Bin 0 -> 1155 bytes
 src/static/tab-user-s.png        | Bin 0 -> 1647 bytes
 src/static/tab-user.png          | Bin 0 -> 1043 bytes
 21 files changed, 716 insertions(+), 695 deletions(-)
 create mode 100644 src/components/Tabbar.vue
 create mode 100644 src/pages/score.vue
 create mode 100644 src/static/app-bg6.png
 create mode 100644 src/static/tab-history-s.png
 create mode 100644 src/static/tab-history.png
 create mode 100644 src/static/tab-score-s.png
 create mode 100644 src/static/tab-score.png
 create mode 100644 src/static/tab-user-s.png
 create mode 100644 src/static/tab-user.png

diff --git a/src/App.vue b/src/App.vue
index 86eff1e..473e32b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -4,3 +4,8 @@
   </App>
 </template>
 
+<style>
+* {
+  font-family: "PingFang SC";
+}
+</style>
diff --git a/src/components/AppBackground.vue b/src/components/AppBackground.vue
index 3095318..52a94bf 100644
--- a/src/components/AppBackground.vue
+++ b/src/components/AppBackground.vue
@@ -10,56 +10,31 @@ const props = defineProps({
     default: "#050b19",
   },
 });
-const capsuleHeight = ref(0);
-// onMounted(() => {
-//   const menuBtnInfo = uni.getMenuButtonBoundingClientRect();
-//   capsuleHeight.value = menuBtnInfo.top + 50 - 9;
-// });
 </script>
 
 <template>
   <view class="background" :style="{ backgroundColor: bgColor }">
-    <image
-      class="bg-image"
-      v-if="type === 2"
-      src="../static/app-bg3.png"
-      :style="{ height: capsuleHeight + 'px' }"
-    />
+    <image class="bg-image" v-if="type === 2" src="../static/app-bg3.png" />
     <image
       class="bg-image"
       v-if="type === 4"
       src="../static/app-bg5.png"
       mode="widthFix"
     />
-    <view class="bg-overlay" v-if="type === 0"></view>
   </view>
 </template>
 
 <style scoped>
 .background {
-  position: fixed;
   width: 100%;
   height: 100%;
+  position: fixed;
   left: 0;
   top: 0;
   z-index: -1;
 }
-
 .bg-image {
   width: 100%;
   height: 100%;
 }
-
-.bg-overlay {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  left: 0;
-  top: 0;
-  background: linear-gradient(
-    to bottom,
-    rgba(26, 26, 26, 0.2),
-    rgba(0, 0, 0, 0.2)
-  );
-}
 </style>
diff --git a/src/components/Container.vue b/src/components/Container.vue
index 5b3cfe4..9b3dd14 100644
--- a/src/components/Container.vue
+++ b/src/components/Container.vue
@@ -9,7 +9,7 @@ const props = defineProps({
   },
   bgType: {
     type: Number,
-    default: 0,
+    default: 2,
   },
   onBack: {
     type: Function,
@@ -25,18 +25,13 @@ const props = defineProps({
   },
   bgColor: {
     type: String,
-    default: "#050b19",
+    default: "#F5F5F5",
   },
 });
 const showHint = ref(false);
 const hintType = ref(0);
-const capsuleHeight = ref(0);
 const isLoading = ref(false);
-
-onMounted(() => {
-  // const menuBtnInfo = uni.getMenuButtonBoundingClientRect();
-  // capsuleHeight.value = menuBtnInfo.top - 9;
-});
+const statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
 
 const goBack = () => {
   uni.navigateBack();
@@ -44,13 +39,13 @@ const goBack = () => {
 </script>
 
 <template>
-  <view :style="{ paddingTop: capsuleHeight + 'px' }">
+  <view :style="{ paddingTop: statusBarHeight + 'px' }">
     <AppBackground :type="bgType" :bgColor="bgColor" />
     <Header v-if="!isHome" :title="title" :onBack="onBack" />
     <view
       class="content"
       :style="{
-        height: `calc(100vh - ${capsuleHeight + (isHome ? 0 : 50)}px)`,
+        height: `calc(100vh - ${statusBarHeight + (isHome ? 0 : 50)}px)`,
         overflow,
       }"
     >
diff --git a/src/components/Header.vue b/src/components/Header.vue
index 53e5865..612f31c 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -1,17 +1,7 @@
 <script setup>
-import { ref, computed, onMounted, onBeforeUnmount } from "vue";
+import { ref, computed, onMounted } from "vue";
 import Avatar from "@/components/Avatar.vue";
 
-import useStore from "@/store";
-import { storeToRefs } from "pinia";
-const store = useStore();
-const { user } = storeToRefs(store);
-
-const currentPage = computed(() => {
-  const pages = getCurrentPages();
-  return pages[pages.length - 1].route;
-});
-
 const props = defineProps({
   title: {
     type: String,
@@ -38,37 +28,14 @@ const onClick = () => {
   }
 };
 
-const toUserPage = () => {
-  uni.navigateTo({
-    url: "/pages/profile",
-  });
-};
-
-const signin = () => {
-  if (!user.value.id) {
-    uni.navigateTo({
-      url: "/pages/signin",
-    });
-  }
-};
-
 const pointBook = ref(null);
-const heat = ref(0);
-
-const updateHot = (value) => {
-  heat.value = value;
-};
 
 onMounted(() => {
   const pages = getCurrentPages();
-  const currentPage = pages[pages.length - 1];
-  if (currentPage.route === "pages/edit") {
+  const currentPage = pages[pages.length - 1].route;
+  if (currentPage === "pages/edit") {
     pointBook.value = uni.getStorageSync("point-book");
   }
-  uni.$on("update-hot", updateHot);
-});
-onBeforeUnmount(() => {
-  uni.$off("update-hot", updateHot);
 });
 </script>
 
@@ -77,32 +44,6 @@ onBeforeUnmount(() => {
     <view class="back-btn" @click="onClick">
       <image src="../static/back-black.png" mode="widthFix" />
     </view>
-    <view :style="{ color: '#000' }">
-      <view
-        v-if="currentPage === 'pages/index'"
-        class="user-header"
-        @click="signin"
-      >
-        <block v-if="user.id">
-          <Avatar
-            :src="user.avatar"
-            :onClick="toUserPage"
-            :size="40"
-            borderColor="#333"
-          />
-          <text class="truncate">{{ user.nickName }}</text>
-          <image
-            v-if="heat"
-            :src="`../static/hot${heat}.png`"
-            mode="widthFix"
-          />
-        </block>
-        <block v-else>
-          <image src="../static/user-icon.png" mode="widthFix" />
-          <text>新来的弓箭手你好呀~</text>
-        </block>
-      </view>
-    </view>
     <view v-if="pointBook" class="point-book-info">
       <text>{{ pointBook.bowType.name }}</text>
       <text>{{ pointBook.distance }} 米</text>
@@ -129,8 +70,7 @@ onBeforeUnmount(() => {
   justify-content: flex-start;
   align-items: center;
   width: 72vw;
-  height: 50px;
-  /* margin-top: var(--status-bar-height); */
+  height: 100rpx;
   padding-left: 15px;
 }
 .container > view:nth-child(2) {
@@ -146,23 +86,6 @@ onBeforeUnmount(() => {
   height: 22px;
   margin-right: 10px;
 }
-.first-try-steps {
-  display: flex;
-  align-items: center;
-  color: #fff6;
-  font-size: 14px;
-}
-.first-try-steps > text {
-  transition: all 0.3s ease;
-}
-.first-try-steps > text:nth-child(2),
-.first-try-steps > text:nth-child(4) {
-  margin: 0 5px;
-}
-.current-step {
-  font-size: 16px;
-  color: #fff;
-}
 .point-book-info {
   color: #333;
   position: fixed;
@@ -178,25 +101,4 @@ onBeforeUnmount(() => {
   padding: 5px 10px;
   margin: 3px;
 }
-.user-header {
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-}
-.user-header > image:first-child {
-  width: 40px;
-  height: 40px;
-  border-radius: 50%;
-  border: 2rpx solid #333;
-}
-.user-header > image:last-child {
-  width: 36rpx;
-}
-.user-header > text:nth-child(2) {
-  font-weight: 500;
-  font-size: 30rpx;
-  color: #333333;
-  margin: 0 20rpx;
-  max-width: 300rpx;
-}
 </style>
diff --git a/src/components/Tabbar.vue b/src/components/Tabbar.vue
new file mode 100644
index 0000000..bbaa7de
--- /dev/null
+++ b/src/components/Tabbar.vue
@@ -0,0 +1,70 @@
+<script setup>
+import { ref, computed } from "vue";
+const props = defineProps({
+  selected: {
+    type: Number,
+    default: 0,
+  },
+  onClick: {
+    type: Function,
+    default: (index) => {},
+  },
+});
+const isIOS = computed(() => {
+  const systemInfo = uni.getDeviceInfo();
+  return systemInfo.osName === "ios";
+});
+</script>
+<template>
+  <view class="tabbar" :style="{ paddingBottom: isIOS ? '30rpx' : '0rpx' }">
+    <view @click="onClick(0)">
+      <image
+        :src="`../static/tab-score${selected === 0 ? '-s' : ''}.png`"
+        mode="widthFix"
+      />
+      <text :style="{ color: selected === 0 ? '#333' : '#999999' }">Score</text>
+    </view>
+    <view @click="onClick(1)">
+      <image
+        :src="`../static/tab-history${selected === 1 ? '-s' : ''}.png`"
+        mode="widthFix"
+      />
+      <text :style="{ color: selected === 1 ? '#333' : '#999999' }"
+        >History</text
+      >
+    </view>
+    <view @click="onClick(2)">
+      <image
+        :src="`../static/tab-user${selected === 2 ? '-s' : ''}.png`"
+        mode="widthFix"
+      />
+      <text :style="{ color: selected === 2 ? '#333' : '#999999' }"
+        >Profile</text
+      >
+    </view>
+  </view>
+</template>
+
+<style scoped>
+.tabbar {
+  background: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  width: 100vw;
+  height: 100rpx;
+}
+.tabbar > view {
+  margin-top: 20rpx;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: 20rpx;
+}
+.tabbar > view > image {
+  width: 56rpx;
+  height: 56rpx;
+  margin-bottom: 5rpx;
+}
+</style>
diff --git a/src/pages.json b/src/pages.json
index e951881..bbe1ef1 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -3,6 +3,12 @@
     {
       "path": "pages/index"
     },
+    {
+      "path": "pages/signin"
+    },
+    {
+      "path": "pages/signup"
+    },
     {
       "path": "pages/create"
     },
@@ -12,21 +18,9 @@
     {
       "path": "pages/edit"
     },
-    {
-      "path": "pages/list"
-    },
-    {
-      "path": "pages/profile"
-    },
     {
       "path": "pages/reset-pwd"
     },
-    {
-      "path": "pages/signin"
-    },
-    {
-      "path": "pages/signup"
-    },
     {
       "path": "pages/edit-profile"
     }
diff --git a/src/pages/create.vue b/src/pages/create.vue
index 41c01b9..f839e6f 100644
--- a/src/pages/create.vue
+++ b/src/pages/create.vue
@@ -70,7 +70,7 @@ onMounted(async () => {
 </script>
 
 <template>
-  <Container :bgType="2" bgColor="#F5F5F5" title="选择参数">
+  <Container title="选择参数">
     <view class="container">
       <view>
         <EditOption
diff --git a/src/pages/detail.vue b/src/pages/detail.vue
index 66c131e..81fb71d 100644
--- a/src/pages/detail.vue
+++ b/src/pages/detail.vue
@@ -111,7 +111,7 @@ onLoad(async (options) => {
 </script>
 
 <template>
-  <Container :bgType="2" bgColor="#F5F5F5" title="" :onBack="goBack">
+  <Container title="" :onBack="goBack">
     <view class="container">
       <!-- <canvas
         class="share-canvas"
diff --git a/src/pages/edit-profile.vue b/src/pages/edit-profile.vue
index 60e2d58..0dc6436 100644
--- a/src/pages/edit-profile.vue
+++ b/src/pages/edit-profile.vue
@@ -18,7 +18,7 @@ onLoad((options) => {
 </script>
 
 <template>
-  <Container :bgType="2" bgColor="#F5F5F5" :title="`Edit ${type}`">
+  <Container :title="`Edit ${type}`">
     <view v-if="type === 'Name'" class="input-view input-row">
       <input
         v-model="formData.name"
diff --git a/src/pages/edit.vue b/src/pages/edit.vue
index 48cc3a4..18015c4 100644
--- a/src/pages/edit.vue
+++ b/src/pages/edit.vue
@@ -96,7 +96,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <Container :bgType="2" bgColor="#F5F5F5" :onBack="() => (showTip = true)">
+  <Container :onBack="() => (showTip = true)">
     <view class="container">
       <BowTargetEdit
         :onChange="onEditDone"
diff --git a/src/pages/index.vue b/src/pages/index.vue
index 2328efb..bbcccd8 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -1,401 +1,111 @@
 <script setup>
 import { ref, computed, onMounted, watch } from "vue";
-import { onShow } from "@dcloudio/uni-app";
-import Container from "@/components/Container.vue";
-import PointRecord from "@/components/PointRecord.vue";
-import RingBarChart from "@/components/RingBarChart.vue";
-
-import {
-  getHomeData,
-  getPointBookConfigAPI,
-  getPointBookStatisticsAPI,
-} from "@/api";
-import { getElementRect } from "@/util";
-
-// import { generateKDEHeatmapImage } from "@/kde-heatmap";
+import Score from "@/pages/score.vue";
+import History from "@/pages/list.vue";
+import Profile from "@/pages/profile.vue";
+import Tabbar from "@/components/Tabbar.vue";
 
 import useStore from "@/store";
 import { storeToRefs } from "pinia";
-const store = useStore();
-const { updateUser } = store;
-const { user } = storeToRefs(store);
+const { user } = storeToRefs(useStore());
 
 const isIOS = computed(() => {
   const systemInfo = uni.getDeviceInfo();
   return systemInfo.osName === "ios";
 });
 
-const loadImage = ref(false);
-const data = ref({
-  weeksCheckIn: [],
-});
-
-const bowTargetSrc = ref("");
-const heatMapImageSrc = ref(""); // 存储热力图图片地址
-
-const toListPage = () => {
-  uni.navigateTo({
-    url: "/pages/list",
-  });
+const tabIndex = ref(0);
+const onTabChnage = (index) => {
+  tabIndex.value = index;
 };
-
-const startScoring = () => {
-  if (user.value.id)
-    return uni.navigateTo({
-      url: "/pages/create",
-    });
-  uni.navigateTo({
-    url: "/pages/signin",
-  });
-};
-
-const loadData = async () => {
-  data.value = await getPointBookStatisticsAPI();
-
-  // const rect = await getElementRect(".heat-map");
-  // let hot = 0;
-  // if (result2.checkInCount > -3 && result2.checkInCount < 3) hot = 1;
-  // else if (result2.checkInCount >= 3) hot = 2;
-  // else if (result2.checkInCount >= 5) hot = 3;
-  // else if (result2.checkInCount === 7) hot = 4;
-  // uni.$emit("update-hot", hot);
-  // loadImage.value = true;
-  // const generateHeatmapAsync = async () => {
-  //   const weekArrows = result2.weekArrows
-  //     .filter((item) => item.x && item.y)
-  //     .map((item) => [item.x, item.y]);
-
-  //   try {
-  //     // 渐进式渲染：数据量大时先快速渲染粗略版本
-  //     if (weekArrows.length > 1000) {
-  //       const quickPath = await generateKDEHeatmapImage(
-  //         "heatMapCanvas",
-  //         rect.width,
-  //         rect.height,
-  //         weekArrows
-  //       );
-  //       heatMapImageSrc.value = quickPath;
-  //       // 延迟后再渲染精细版本
-  //       await new Promise((resolve) => setTimeout(resolve, 500));
-  //     }
-
-  //     // 渲染最终精细版本
-  //     const finalPath = await generateKDEHeatmapImage(
-  //       "heatMapCanvas",
-  //       rect.width,
-  //       rect.height,
-  //       weekArrows,
-  //       {
-  //         range: [0, 1],
-  //         gridSize: 120, // 更高的网格密度，减少锯齿
-  //         bandwidth: 0.15, // 稍小的带宽，让热力图更细腻
-  //         showPoints: false,
-  //       }
-  //     );
-  //     heatMapImageSrc.value = finalPath;
-  //     loadImage.value = false;
-  //     console.log("Heatmap image path:", finalPath);
-  //   } catch (error) {
-  //     console.error("Failed to generate heatmap image:", error);
-  //     loadImage.value = false;
-  //   }
-  // };
-
-  // // 异步生成热力图，不阻塞UI
-  // generateHeatmapAsync();
-};
-
-watch(
-  () => user.value.id,
-  (id) => {
-    if (id) loadData();
-  }
-);
-
-onShow(async () => {
-  uni.removeStorageSync("point-book");
-  if (user.value.id) loadData();
-});
-
-onMounted(async () => {
-  const token = uni.getStorageSync("token");
-  if (!user.value.id && token) {
-    const data = await getHomeData();
-    if (data.user) updateUser(data.user);
-  }
-  const config = await getPointBookConfigAPI();
-  uni.setStorageSync("point-book-config", config);
-  if (config.targetOption && config.targetOption[0]) {
-    bowTargetSrc.value = config.targetOption[0].icon;
-  }
-});
+const editAvatar = ref(false);
 </script>
 
 <template>
-  <Container :bgType="4" bgColor="#F5F5F5" title="">
-    <view class="container">
-      <view class="daily-signin">
+  <view class="container">
+    <swiper
+      :current="tabIndex"
+      @change="(e) => (tabIndex = e.detail.current)"
+      :style="{
+        height: `calc(100vh - 100rpx - ${isIOS ? '30rpx' : '0rpx'})`,
+        background: '#f5f5f5',
+      }"
+    >
+      <swiper-item>
+        <Score />
+      </swiper-item>
+      <swiper-item>
+        <History />
+      </swiper-item>
+      <swiper-item>
+        <Profile :editAvatar="() => (editAvatar = true)" />
+      </swiper-item>
+    </swiper>
+    <view
+      class="edit-avatar"
+      :style="{ height: editAvatar ? '100vh' : '0' }"
+      @click="editAvatar = false"
+    >
+      <image :src="user.avatar" mode="widthFix" />
+      <view>
         <view>
-          <image src="../static/week-check.png" />
+          <text>Take a photo</text>
+          <image src="../static/back-grey.png" mode="widthFix" />
         </view>
-        <view :class="data.weeksCheckIn[0] ? 'checked' : ''">
-          <image
-            v-if="data.weeksCheckIn[0]"
-            src="../static/checked-green2.png"
-            mode="widthFix"
-          />
-          <view v-else></view>
-          <text>Mon</text>
-        </view>
-        <view :class="data.weeksCheckIn[1] ? 'checked' : ''">
-          <image
-            v-if="data.weeksCheckIn[1]"
-            src="../static/checked-green2.png"
-            mode="widthFix"
-          />
-          <view v-else></view>
-          <text>Tue</text>
-        </view>
-        <view :class="data.weeksCheckIn[2] ? 'checked' : ''">
-          <image
-            v-if="data.weeksCheckIn[2]"
-            src="../static/checked-green2.png"
-            mode="widthFix"
-          />
-          <view v-else></view>
-          <text>Wed</text>
-        </view>
-        <view :class="data.weeksCheckIn[3] ? 'checked' : ''">
-          <image
-            v-if="data.weeksCheckIn[3]"
-            src="../static/checked-green2.png"
-            mode="widthFix"
-          />
-          <view v-else></view>
-          <text>Thu</text>
-        </view>
-        <view :class="data.weeksCheckIn[4] ? 'checked' : ''">
-          <image
-            v-if="data.weeksCheckIn[4]"
-            src="../static/checked-green2.png"
-            mode="widthFix"
-          />
-          <view v-else></view>
-          <text>Fri</text>
-        </view>
-        <view :class="data.weeksCheckIn[5] ? 'checked' : ''">
-          <image
-            v-if="data.weeksCheckIn[5]"
-            src="../static/checked-green2.png"
-            mode="widthFix"
-          />
-          <view v-else></view>
-          <text>Sat</text>
-        </view>
-        <view :class="data.weeksCheckIn[6] ? 'checked' : ''">
-          <image
-            v-if="data.weeksCheckIn[6]"
-            src="../static/checked-green2.png"
-            mode="widthFix"
-          />
-          <view v-else></view>
-          <text>Sun</text>
+        <view>
+          <text>Choose photo</text>
+          <image src="../static/back-grey.png" mode="widthFix" />
         </view>
       </view>
-      <view class="statistics">
-        <view>
-          <text>{{ data.todayTotalArrow || "-" }}</text>
-          <text>Arrows Today</text>
-        </view>
-        <view>
-          <text>{{ data.totalArrow || "-" }}</text>
-          <text>Total Arrows</text>
-        </view>
-        <view>
-          <text>{{ data.totalDay || "-" }}</text>
-          <text>Training Days</text>
-        </view>
-        <view>
-          <text>{{ data.averageRing || "-" }}</text>
-          <text>Average Rings</text>
-        </view>
-        <view>
-          <text>{{
-            data.yellowRate !== undefined
-              ? Number((data.yellowRate * 100).toFixed(2)) + "%"
-              : "-"
-          }}</text>
-          <text>Gold Rate</text>
-        </view>
-        <view>
-          <button hover-class="none" @click="startScoring">
-            <image src="../static/start-scoring.png" mode="widthFix" />
-          </button>
-        </view>
-      </view>
-      <view class="title" :style="{ marginBottom: 0 }">
-        <image src="../static/point-book-title1.png" mode="widthFix" />
-      </view>
-      <view class="heat-map">
-        <image
-          :src="bowTargetSrc || '../static/bow-target.png'"
-          mode="widthFix"
-        />
-        <image
-          v-if="heatMapImageSrc"
-          :src="heatMapImageSrc"
-          mode="aspectFill"
-        />
-        <view v-if="loadImage" class="load-image">
-          <text>Generating...</text>
-        </view>
-        <canvas
-          id="heatMapCanvas"
-          canvas-id="heatMapCanvas"
-          type="2d"
-          style="
-            width: 100%;
-            height: 100%;
-            position: absolute;
-            top: -1000px;
-            left: 0;
-            z-index: 2;
-          "
-        />
-      </view>
-      <RingBarChart :data="data.ringRate" v-if="user.id" />
     </view>
-  </Container>
+    <Tabbar :selected="tabIndex" :onClick="onTabChnage" />
+  </view>
 </template>
 
 <style scoped>
 .container {
-  width: calc(100% - 50rpx);
-  padding: 25rpx;
+  width: 100vw;
+  height: 100vw;
+  background: #f5f5f5;
 }
-.statistics {
-  border-radius: 25rpx;
-  border-bottom-left-radius: 50rpx;
-  border-bottom-right-radius: 50rpx;
-  border: 4rpx solid #fed848;
-  background: #fff;
-  font-size: 22rpx;
-  display: flex;
-  flex-wrap: wrap;
-  padding: 25rpx 0;
-  margin-bottom: 10rpx;
-}
-.statistics > view {
-  width: 33.33%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-}
-.statistics > view:nth-child(-n + 3) {
-  margin-bottom: 25rpx;
-}
-.statistics > view:nth-child(2),
-.statistics > view:nth-child(5) {
-  border-left: 1rpx solid #eeeeee;
-  border-right: 1rpx solid #eeeeee;
-  box-sizing: border-box;
-}
-.statistics > view > text {
-  text-align: center;
-  font-size: 22rpx;
-  color: #333333;
-}
-.statistics > view > text:first-child {
-  font-weight: 500;
-  font-size: 40rpx;
-  margin-bottom: 10rpx;
-}
-.statistics > view:last-child > button > image {
-  width: 164rpx;
-}
-.daily-signin {
-  display: grid;
-  grid-template-columns: repeat(8, 1fr);
-  gap: 10rpx;
-  border-radius: 20rpx;
-  margin-bottom: 25rpx;
-}
-.daily-signin > view {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  border-radius: 12rpx;
-  box-sizing: border-box;
-}
-.daily-signin > view:not(:first-child) {
-  background: #f8f8f8;
-  box-sizing: border-box;
-  width: 78rpx;
-  height: 94rpx;
-  padding-top: 10rpx;
-}
-.daily-signin > view:not(:first-child) > image {
-  width: 32rpx;
-  height: 32rpx;
-}
-.daily-signin > view:not(:first-child) > view {
-  width: 32rpx;
-  height: 32rpx;
-  border-radius: 50%;
-  box-sizing: border-box;
-  border: 2rpx solid #333;
-}
-.daily-signin > view > text {
-  font-size: 20rpx;
-  color: #999999;
-  font-weight: 500;
-  text-align: center;
-  margin-top: 10rpx;
-}
-.daily-signin > view:first-child > image {
-  width: 72rpx;
-  height: 94rpx;
-}
-.checked {
-  border: 2rpx solid #000;
-}
-.checked > text {
-  color: #333 !important;
-}
-.title {
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  margin: 25rpx 0;
-}
-.title > image {
-  width: 566rpx;
-}
-.heat-map {
-  position: relative;
-  margin: 0 auto;
-  width: calc(100vw - 70rpx);
-  height: calc(100vw - 70rpx);
-  transform: scale(0.9);
-}
-.heat-map > image {
-  width: 100%;
-  height: 100%;
-  position: absolute;
+.edit-avatar {
+  position: fixed;
   top: 0;
-  left: 0;
-}
-.load-image {
-  position: absolute;
-  width: 160rpx;
-  top: calc(50% - 65rpx);
-  left: calc(50% - 75rpx);
-  color: #525252;
-  font-size: 20rpx;
+  right: 0;
+  width: 100vw;
+  background: rgba(0, 0, 0, 0.8);
   display: flex;
   flex-direction: column;
   align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  z-index: 999;
+}
+.edit-avatar > image {
+  width: 85vw;
+  height: 85vw;
+  border-radius: 50%;
+}
+.edit-avatar > view {
+  border-radius: 25rpx;
+  margin-top: 100rpx;
+  width: calc(100% - 150rpx);
+  padding: 0 40rpx;
+  background: #404040;
+}
+.edit-avatar > view > view {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 30rpx;
+  color: #ffffff;
+  padding: 40rpx 0;
+}
+.edit-avatar > view > view:not(:last-child) {
+  border-bottom: 1rpx solid #fff3;
+  border-radius: 0;
+}
+.edit-avatar > view > view > image {
+  width: 28rpx;
 }
 </style>
diff --git a/src/pages/list.vue b/src/pages/list.vue
index 8b11b51..0ffe3b6 100644
--- a/src/pages/list.vue
+++ b/src/pages/list.vue
@@ -1,6 +1,5 @@
 <script setup>
 import { ref, onMounted } from "vue";
-import Container from "@/components/Container.vue";
 import SModal from "@/components/SModal.vue";
 import EditOption from "@/components/EditOption.vue";
 import PointRecord from "@/components/PointRecord.vue";
@@ -8,6 +7,7 @@ import ScrollList from "@/components/ScrollList.vue";
 import ScreenHint from "@/components/ScreenHint.vue";
 import { getPointBookListAPI, removePointRecord } from "@/api";
 
+const statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
 const showTip = ref(false);
 const bowType = ref({});
 const distance = ref(0);
@@ -67,100 +67,116 @@ const onSelectOption = (itemIndex, value) => {
 </script>
 
 <template>
-  <Container :bgType="2" bgColor="#F5F5F5" title="Point Records">
-    <view class="container">
-      <view class="selectors">
-        <view @click="() => openSelector(0)">
-          <text :style="{ color: bowType.name ? '#000' : '#999' }">{{
-            bowType.name || "Please select"
-          }}</text>
-          <image src="../static/arrow-grey.png" mode="widthFix" />
-        </view>
-        <view @click="() => openSelector(1)">
-          <text :style="{ color: distance ? '#000' : '#999' }">{{
-            distance ? distance + " m" : "Please select"
-          }}</text>
-          <image src="../static/arrow-grey.png" mode="widthFix" />
-        </view>
-        <view @click="() => openSelector(2)">
-          <text :style="{ color: bowtargetType.name ? '#000' : '#999' }">{{
-            bowtargetType.name || "Please select"
-          }}</text>
-          <image src="../static/arrow-grey.png" mode="widthFix" />
-        </view>
-      </view>
-      <view class="point-records">
-        <ScrollList :onLoading="onListLoading">
-          <view v-for="(item, index) in list" :key="item.id">
-            <PointRecord :data="item" :onRemove="onRemoveRecord" />
-            <view
-              v-if="index < list.length - 1"
-              :style="{ height: '25rpx' }"
-            ></view>
-          </view>
-          <view class="no-data" v-if="list.length === 0">No data</view>
-        </ScrollList>
-      </view>
-      <SModal
-        :show="showModal"
-        :noBg="true"
-        height="auto"
-        :onClose="() => (showModal = false)"
-      >
-        <view class="selector">
-          <button hover-class="none" @click="() => (showModal = false)">
-            <image src="../static/close-grey.png" mode="widthFix" />
-          </button>
-          <EditOption
-            v-show="selectorIndex === 0"
-            :itemIndex="0"
-            :expand="true"
-            :noArrow="true"
-            :onSelect="onSelectOption"
-            :value="bowType.name"
-          />
-          <EditOption
-            v-show="selectorIndex === 1"
-            :itemIndex="1"
-            :expand="true"
-            :noArrow="true"
-            :onSelect="onSelectOption"
-            :value="distance + ''"
-          />
-          <EditOption
-            v-show="selectorIndex === 2"
-            :itemIndex="2"
-            :expand="true"
-            :noArrow="true"
-            :onSelect="onSelectOption"
-            :value="bowtargetType.name"
-          />
-        </view>
-      </SModal>
-      <ScreenHint :show="showTip">
-        <view class="tip-content">
-          <text>Are you sure to delete this record?</text>
-          <view>
-            <button hover-class="none" @click="showTip = false">Cancel</button>
-            <button hover-class="none" @click="confirmRemove">Confirm</button>
-          </view>
-        </view>
-      </ScreenHint>
+  <view
+    class="list"
+    :style="{
+      paddingTop: statusBarHeight + 'px',
+      backgroundSize: `100% ${statusBarHeight + 50}px`,
+    }"
+  >
+    <view class="list-header">
+      <text>History</text>
     </view>
-  </Container>
+    <view class="selectors">
+      <view @click="() => openSelector(0)">
+        <text :style="{ color: bowType.name ? '#000' : '#999' }">{{
+          bowType.name || "Please select"
+        }}</text>
+        <image src="../static/arrow-grey.png" mode="widthFix" />
+      </view>
+      <view @click="() => openSelector(1)">
+        <text :style="{ color: distance ? '#000' : '#999' }">{{
+          distance ? distance + " m" : "Please select"
+        }}</text>
+        <image src="../static/arrow-grey.png" mode="widthFix" />
+      </view>
+      <view @click="() => openSelector(2)">
+        <text :style="{ color: bowtargetType.name ? '#000' : '#999' }">{{
+          bowtargetType.name || "Please select"
+        }}</text>
+        <image src="../static/arrow-grey.png" mode="widthFix" />
+      </view>
+    </view>
+    <view class="point-records">
+      <ScrollList :onLoading="onListLoading">
+        <view v-for="(item, index) in list" :key="item.id">
+          <PointRecord :data="item" :onRemove="onRemoveRecord" />
+          <view
+            v-if="index < list.length - 1"
+            :style="{ height: '25rpx' }"
+          ></view>
+        </view>
+        <view class="no-data" v-if="list.length === 0">No data</view>
+      </ScrollList>
+    </view>
+    <SModal
+      :show="showModal"
+      :noBg="true"
+      height="auto"
+      :onClose="() => (showModal = false)"
+    >
+      <view class="selector">
+        <button hover-class="none" @click="() => (showModal = false)">
+          <image src="../static/close-grey.png" mode="widthFix" />
+        </button>
+        <EditOption
+          v-show="selectorIndex === 0"
+          :itemIndex="0"
+          :expand="true"
+          :noArrow="true"
+          :onSelect="onSelectOption"
+          :value="bowType.name"
+        />
+        <EditOption
+          v-show="selectorIndex === 1"
+          :itemIndex="1"
+          :expand="true"
+          :noArrow="true"
+          :onSelect="onSelectOption"
+          :value="distance + ''"
+        />
+        <EditOption
+          v-show="selectorIndex === 2"
+          :itemIndex="2"
+          :expand="true"
+          :noArrow="true"
+          :onSelect="onSelectOption"
+          :value="bowtargetType.name"
+        />
+      </view>
+    </SModal>
+    <ScreenHint :show="showTip">
+      <view class="tip-content">
+        <text>Are you sure to delete this record?</text>
+        <view>
+          <button hover-class="none" @click="showTip = false">Cancel</button>
+          <button hover-class="none" @click="confirmRemove">Confirm</button>
+        </view>
+      </view>
+    </ScreenHint>
+  </view>
 </template>
 
 <style scoped>
-.container {
-  width: 100%;
-  height: 100%;
+.list {
+  background: url("../static/app-bg3.png") no-repeat top/contain;
+}
+.list-header {
+  height: 40px;
+  margin-bottom: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 500;
+  font-size: 30rpx;
+  color: #333333;
 }
 .selectors {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 0 15px;
-  margin-top: 10px;
+  margin-top: 40rpx;
 }
 .selectors > view {
   display: flex;
diff --git a/src/pages/profile.vue b/src/pages/profile.vue
index f93068e..8fc6559 100644
--- a/src/pages/profile.vue
+++ b/src/pages/profile.vue
@@ -7,7 +7,14 @@ import { storeToRefs } from "pinia";
 const store = useStore();
 const { user } = storeToRefs(store);
 
-const editAvatar = ref(false);
+const props = defineProps({
+  editAvatar: {
+    type: String,
+    default: "",
+  },
+});
+
+const statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
 
 const toEditPage = (type) => {
   uni.navigateTo({
@@ -23,90 +30,79 @@ const toSignInPage = () => {
 </script>
 
 <template>
-  <view class="container">
+  <view
+    class="profile"
+    :style="{
+      paddingTop: statusBarHeight + 'px',
+    }"
+  >
     <view class="header">
       <image :src="user.avatar" mode="widthFix" />
-      <button hover-class="none" @click="editAvatar = true">
+      <view @click="editAvatar">
         <image src="../static/pen-yellow.png" mode="widthFix" />
-      </button>
+      </view>
     </view>
     <view class="body">
       <view>
-        <button hover-class="none" @click="toEditPage('Name')">
+        <view @click="toEditPage('Name')">
           <image src="../static/user-yellow.png" mode="widthFix" />
           <text>Name</text>
           <image src="../static/back-grey.png" mode="widthFix" />
-        </button>
-        <button hover-class="none" @click="toEditPage('Email')">
+        </view>
+        <view @click="toEditPage('Email')">
           <image src="../static/email-yellow.png" mode="widthFix" />
           <text>Email</text>
           <image src="../static/back-grey.png" mode="widthFix" />
-        </button>
-        <button hover-class="none" @click="toEditPage('Password')">
+        </view>
+        <view @click="toEditPage('Password')">
           <image src="../static/password-yellow.png" mode="widthFix" />
           <text>Password</text>
           <image src="../static/back-grey.png" mode="widthFix" />
-        </button>
+        </view>
       </view>
-      <button hover-class="none" @click="toSignInPage">Log out</button>
+      <view @click="toSignInPage">Log out</view>
       <view>
         <text>Have questions? Please contact us through email: </text>
         <text>shelingxingqiu@163.com</text>
       </view>
     </view>
-    <view
-      class="edit-avatar"
-      :style="{ height: editAvatar ? '100vh' : '0' }"
-      @click="editAvatar = false"
-    >
-      <image :src="user.avatar" mode="widthFix" />
-      <view>
-        <button hover-class="none">
-          <text>Take a photo</text>
-          <image src="../static/back-grey.png" mode="widthFix" />
-        </button>
-        <button hover-class="none">
-          <text>Choose photo</text>
-          <image src="../static/back-grey.png" mode="widthFix" />
-        </button>
-      </view>
-    </view>
   </view>
 </template>
 
 <style scoped>
-.container {
+.profile {
   display: flex;
   flex-direction: column;
   align-items: center;
+  background: url("../static/app-bg6.png") no-repeat top/contain;
   height: 100%;
+  position: relative;
 }
 .header {
   position: relative;
-  margin-top: -120rpx;
 }
 .header > image {
-  width: 180rpx;
-  height: 180rpx;
+  width: 160rpx;
+  height: 160rpx;
   border-radius: 50%;
   border: 4rpx solid #fff;
+  box-sizing: border-box;
 }
-.header > button {
+.header > view {
   position: absolute;
   right: 0;
   bottom: 0;
 }
-.header > button > image {
+.header > view > image {
   width: 60rpx;
   height: 60rpx;
 }
 .body {
-  width: 100%;
-  margin-top: 20rpx;
+  padding: 25rpx;
+  width: calc(100% - 50rpx);
   display: flex;
   flex-direction: column;
   align-items: center;
-  flex: 1;
 }
 .body > view:first-child {
   background-color: #fff;
@@ -114,40 +110,41 @@ const toSignInPage = () => {
   padding: 0 20px;
   width: calc(100% - 80rpx);
 }
-.body > view:first-child > button {
+.body > view:first-child > view {
   display: flex;
   align-items: center;
   padding: 20px 0;
 }
-.body > view:first-child > button:not(:last-child) {
+.body > view:first-child > view:not(:last-child) {
   border-bottom: 1rpx solid #e3e3e3;
 }
-.body > view:first-child > button > image:first-child {
+.body > view:first-child > view > image:first-child {
   width: 40rpx;
   height: 40rpx;
 }
-.body > view:first-child > button > text {
+.body > view:first-child > view > text {
   flex: 1;
   font-size: 26rpx;
   color: #333333;
   text-align: left;
   padding-left: 20rpx;
 }
-.body > view:first-child > button > image:last-child {
+.body > view:first-child > view > image:last-child {
   width: 28rpx;
   height: 28rpx;
 }
-.body > button {
+.body > view:nth-child(2) {
   margin-top: 24rpx;
   background: #fff;
   border-radius: 24rpx;
   font-size: 26rpx;
   color: #287fff;
   text-align: center;
-  padding: 20px 0;
   width: 100%;
+  height: 100rpx;
+  line-height: 100rpx;
 }
-.body > view:last-child {
+.body > view:nth-child(3) {
   margin-top: auto;
   padding-bottom: 25rpx;
   display: flex;
@@ -155,47 +152,10 @@ const toSignInPage = () => {
   align-items: center;
   font-size: 24rpx;
   color: #666666;
+  position: absolute;
+  bottom: 120rpx;
 }
-.body > view:last-child > text:last-child {
+.body > view:nth-child(3) > text:last-child {
   color: #287fff;
 }
-.edit-avatar {
-  position: fixed;
-  top: 0;
-  right: 0;
-  width: 100vw;
-  background: rgba(0, 0, 0, 0.8);
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-}
-.edit-avatar > image {
-  width: 85vw;
-  height: 85vw;
-  border-radius: 50%;
-}
-.edit-avatar > view {
-  border-radius: 25rpx;
-  margin-top: 100rpx;
-  width: calc(100% - 150rpx);
-  padding: 0 40rpx;
-  background: #404040;
-}
-.edit-avatar > view > button {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  font-size: 30rpx;
-  color: #ffffff;
-  padding: 40rpx 0;
-}
-.edit-avatar > view > button:not(:last-child) {
-  border-bottom: 1rpx solid #fff3;
-  border-radius: 0;
-}
-.edit-avatar > view > button > image {
-  width: 28rpx;
-}
 </style>
diff --git a/src/pages/score.vue b/src/pages/score.vue
new file mode 100644
index 0000000..0900f43
--- /dev/null
+++ b/src/pages/score.vue
@@ -0,0 +1,394 @@
+<script setup>
+import { ref, watch, onMounted } from "vue";
+import { onShow } from "@dcloudio/uni-app";
+
+import PointRecord from "@/components/PointRecord.vue";
+import RingBarChart from "@/components/RingBarChart.vue";
+
+import {
+  getHomeData,
+  getPointBookConfigAPI,
+  getPointBookStatisticsAPI,
+} from "@/api";
+import { getElementRect } from "@/util";
+// import { generateKDEHeatmapImage } from "@/kde-heatmap";
+
+import useStore from "@/store";
+import { storeToRefs } from "pinia";
+const store = useStore();
+const { updateUser } = store;
+const { user } = storeToRefs(store);
+
+const statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
+const loadImage = ref(false);
+const heat = ref(0);
+const data = ref({
+  weeksCheckIn: [],
+});
+
+const bowTargetSrc = ref("");
+const heatMapImageSrc = ref(""); // 存储热力图图片地址
+
+const startScoring = () => {
+  if (user.value.id)
+    return uni.navigateTo({
+      url: "/pages/create",
+    });
+  uni.navigateTo({
+    url: "/pages/signin",
+  });
+};
+
+const loadData = async () => {
+  data.value = await getPointBookStatisticsAPI();
+
+  if (data.value.checkInCount > -3 && data.value.checkInCount < 3)
+    heat.value = 1;
+  else if (data.value.checkInCount >= 3) heat.value = 2;
+  else if (data.value.checkInCount >= 5) heat.value = 3;
+  else if (data.value.checkInCount === 7) heat.value = 4;
+};
+
+watch(
+  () => user.value.id,
+  (id) => {
+    if (id) loadData();
+  }
+);
+
+const signin = () => {
+  if (!user.value.id) {
+    uni.navigateTo({
+      url: "/pages/signin",
+    });
+  }
+};
+
+onShow(async () => {
+  uni.removeStorageSync("point-book");
+  if (user.value.id) loadData();
+});
+
+onMounted(async () => {
+  const token = uni.getStorageSync("token");
+  if (!user.value.id && token) {
+    const data = await getHomeData();
+    if (data.user) updateUser(data.user);
+  }
+  const config = await getPointBookConfigAPI();
+  uni.setStorageSync("point-book-config", config);
+  if (config.targetOption && config.targetOption[0]) {
+    bowTargetSrc.value = config.targetOption[0].icon;
+  }
+});
+</script>
+
+<template>
+  <view class="score" :style="{ paddingTop: statusBarHeight + 'px' }">
+    <view class="user-header" @click="signin">
+      <block v-if="user.id">
+        <Avatar
+          :src="user.avatar"
+          :onClick="toUserPage"
+          :size="40"
+          borderColor="#333"
+        />
+        <text class="truncate">{{ user.nickName }}</text>
+        <image v-if="heat" :src="`../static/hot${heat}.png`" mode="widthFix" />
+      </block>
+      <block v-else>
+        <image src="../static/user-icon.png" mode="widthFix" />
+        <text>Hello~</text>
+      </block>
+    </view>
+    <view class="daily-signin">
+      <view>
+        <image src="../static/week-check.png" />
+      </view>
+      <view :class="data.weeksCheckIn[0] ? 'checked' : ''">
+        <image
+          v-if="data.weeksCheckIn[0]"
+          src="../static/checked-green2.png"
+          mode="widthFix"
+        />
+        <view v-else></view>
+        <text>Mon</text>
+      </view>
+      <view :class="data.weeksCheckIn[1] ? 'checked' : ''">
+        <image
+          v-if="data.weeksCheckIn[1]"
+          src="../static/checked-green2.png"
+          mode="widthFix"
+        />
+        <view v-else></view>
+        <text>Tue</text>
+      </view>
+      <view :class="data.weeksCheckIn[2] ? 'checked' : ''">
+        <image
+          v-if="data.weeksCheckIn[2]"
+          src="../static/checked-green2.png"
+          mode="widthFix"
+        />
+        <view v-else></view>
+        <text>Wed</text>
+      </view>
+      <view :class="data.weeksCheckIn[3] ? 'checked' : ''">
+        <image
+          v-if="data.weeksCheckIn[3]"
+          src="../static/checked-green2.png"
+          mode="widthFix"
+        />
+        <view v-else></view>
+        <text>Thu</text>
+      </view>
+      <view :class="data.weeksCheckIn[4] ? 'checked' : ''">
+        <image
+          v-if="data.weeksCheckIn[4]"
+          src="../static/checked-green2.png"
+          mode="widthFix"
+        />
+        <view v-else></view>
+        <text>Fri</text>
+      </view>
+      <view :class="data.weeksCheckIn[5] ? 'checked' : ''">
+        <image
+          v-if="data.weeksCheckIn[5]"
+          src="../static/checked-green2.png"
+          mode="widthFix"
+        />
+        <view v-else></view>
+        <text>Sat</text>
+      </view>
+      <view :class="data.weeksCheckIn[6] ? 'checked' : ''">
+        <image
+          v-if="data.weeksCheckIn[6]"
+          src="../static/checked-green2.png"
+          mode="widthFix"
+        />
+        <view v-else></view>
+        <text>Sun</text>
+      </view>
+    </view>
+    <view class="statistics">
+      <view>
+        <text>{{ data.todayTotalArrow || "-" }}</text>
+        <text>Arrows Today</text>
+      </view>
+      <view>
+        <text>{{ data.totalArrow || "-" }}</text>
+        <text>Total Arrows</text>
+      </view>
+      <view>
+        <text>{{ data.totalDay || "-" }}</text>
+        <text>Training Days</text>
+      </view>
+      <view>
+        <text>{{ data.averageRing || "-" }}</text>
+        <text>Average Rings</text>
+      </view>
+      <view>
+        <text>{{
+          data.yellowRate !== undefined
+            ? Number((data.yellowRate * 100).toFixed(2)) + "%"
+            : "-"
+        }}</text>
+        <text>Gold Rate</text>
+      </view>
+      <view>
+        <view @click="startScoring">
+          <image src="../static/start-scoring.png" mode="widthFix" />
+        </view>
+      </view>
+    </view>
+    <view class="title" :style="{ marginBottom: 0 }">
+      <image src="../static/point-book-title1.png" mode="widthFix" />
+    </view>
+    <view class="heat-map">
+      <image
+        :src="bowTargetSrc || '../static/bow-target.png'"
+        mode="widthFix"
+      />
+      <image v-if="heatMapImageSrc" :src="heatMapImageSrc" mode="aspectFill" />
+      <view v-if="loadImage" class="load-image">
+        <text>Generating...</text>
+      </view>
+      <canvas
+        id="heatMapCanvas"
+        canvas-id="heatMapCanvas"
+        type="2d"
+        style="
+          width: 100%;
+          height: 100%;
+          position: absolute;
+          top: -1000px;
+          left: 0;
+          z-index: 2;
+        "
+      />
+    </view>
+    <RingBarChart :data="data.ringRate" v-if="user.id" />
+  </view>
+</template>
+
+<style scoped>
+.score {
+  padding-left: 25rpx;
+  padding-right: 25rpx;
+  background: url("../static/app-bg5.png") no-repeat top/contain;
+}
+.statistics {
+  border-radius: 25rpx;
+  border-bottom-left-radius: 50rpx;
+  border-bottom-right-radius: 50rpx;
+  border: 2px solid #fed848;
+  background: #fff;
+  font-size: 22rpx;
+  display: flex;
+  flex-wrap: wrap;
+  padding: 25rpx 0;
+  margin-bottom: 10rpx;
+}
+.statistics > view {
+  width: 33.33%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+.statistics > view:nth-child(-n + 3) {
+  margin-bottom: 25rpx;
+}
+.statistics > view:nth-child(2),
+.statistics > view:nth-child(5) {
+  border-left: 1rpx solid #eeeeee;
+  border-right: 1rpx solid #eeeeee;
+  box-sizing: border-box;
+}
+.statistics > view > text {
+  text-align: center;
+  font-size: 22rpx;
+  color: #333333;
+}
+.statistics > view > text:first-child {
+  font-weight: 500;
+  font-size: 40rpx;
+  margin-bottom: 10rpx;
+}
+.statistics > view:last-child > view {
+  display: flex;
+  align-items: center;
+}
+.statistics > view:last-child > view > image {
+  width: 164rpx;
+  height: 74rpx;
+}
+.daily-signin {
+  display: grid;
+  grid-template-columns: repeat(8, 1fr);
+  gap: 10rpx;
+  border-radius: 20rpx;
+  margin-bottom: 25rpx;
+}
+.daily-signin > view {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  border-radius: 12rpx;
+  box-sizing: border-box;
+}
+.daily-signin > view:not(:first-child) {
+  background: #f8f8f8;
+  box-sizing: border-box;
+  width: 78rpx;
+  height: 94rpx;
+  padding-top: 10rpx;
+}
+.daily-signin > view:not(:first-child) > image {
+  width: 32rpx;
+  height: 32rpx;
+}
+.daily-signin > view:not(:first-child) > view {
+  width: 32rpx;
+  height: 32rpx;
+  border-radius: 50%;
+  box-sizing: border-box;
+  border: 2rpx solid #333;
+}
+.daily-signin > view > text {
+  font-size: 20rpx;
+  color: #999999;
+  font-weight: 500;
+  text-align: center;
+  margin-top: 10rpx;
+}
+.daily-signin > view:first-child > image {
+  width: 72rpx;
+  height: 94rpx;
+}
+.checked {
+  border: 2rpx solid #000;
+}
+.checked > text {
+  color: #333 !important;
+}
+.title {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  margin: 25rpx 0;
+}
+.title > image {
+  width: 566rpx;
+}
+.heat-map {
+  position: relative;
+  margin: 0 auto;
+  width: calc(100vw - 70rpx);
+  height: calc(100vw - 70rpx);
+  transform: scale(0.9);
+}
+.heat-map > image {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+.load-image {
+  position: absolute;
+  width: 160rpx;
+  top: calc(50% - 65rpx);
+  left: calc(50% - 75rpx);
+  color: #525252;
+  font-size: 20rpx;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.user-header {
+  display: flex;
+  align-items: start;
+  justify-content: flex-start;
+  height: 40px;
+  margin-bottom: 10px;
+}
+.user-header > image:first-child {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  border: 1px solid #333;
+  box-sizing: border-box;
+}
+.user-header > image:last-child {
+  width: 36rpx;
+}
+.user-header > text:nth-child(2) {
+  font-weight: 500;
+  font-size: 30rpx;
+  color: #333333;
+  margin: 0 20rpx;
+  max-width: 300rpx;
+  line-height: 90rpx;
+}
+</style>
diff --git a/src/static/app-bg6.png b/src/static/app-bg6.png
new file mode 100644
index 0000000000000000000000000000000000000000..a33e26a60d294c2ad10cbc932a99d2d0a832a6ae
GIT binary patch
literal 8684
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
Z4c4<<MM1`4(fWT-Q&msplal@G{{xvpwq5`L

literal 0
HcmV?d00001

diff --git a/src/static/tab-history-s.png b/src/static/tab-history-s.png
new file mode 100644
index 0000000000000000000000000000000000000000..4f61626669914b70acdf74d4426a4a1397e6a214
GIT binary patch
literal 1336
zcmeAS@N?(olHy`uVBq!ia0vp^E<kL>!3-qrp7I+qFfcj>_=LCuxyHuEMn*;^CMFgZ
z7Jpy3{r}(u6afM&E31Dm-AzqF?EkOafolH0bpHR+9ms}=fY>iR{=abl|K1_M*A%E2
zq!gss4XoG$$OZ}m)q|A11e)xor>6%o5U2ns3n#tZ&HlY`cXTj87KF&gMw-97?H1^3
zHnGhHD026V>)wqZ7p|CX2QmM{9oPDDtF0^S*UY!?YqjZYu>SST?c83c%ZHt2O|boZ
z-}UiDmwRWNZyt9p$h6EzvWST=_i{INus5-?G|ox0NRBf%Gc*47$nDj2*AqJ&TdJ)>
z1I>1=aoD)Te$_m?WwY!S&#+rK)z;U`^!XK+(mYESCzC^494B_z?BD3%;byvlpW!Gl
z5baBX{DK*-w*(9QW8d<H<Bs{GGZNxIZtmH!rQ2WN&-A`L&tI=!J-t&DttfkY!_4Yf
zFUQYso}XGdHC^xHyUQ0>cV=YhYMxl(+RVVfobKu37~*mK?6l`$T807*;-wq4H4@%`
zy><I-YTKhrj#Cyj?2WtspD}L}XL`!XU8gO-x8K*F`{t*I(PYmp{hs;%)0PX*c7Lz+
zYj^qq-s0EV+xnObe9yP_CiC7(^m_S&CD(BC(t<T#7?%HbZx@~{_u$P<-;{On#Z78!
zf0Xqfw>B+*!@PL0son8I^G&Dc6rHTgp3`odr|Nz{BG5a{=KaQ9yKT?ixEK4C=Z5F4
zN6DW1eEzea<n*f$opg1b*uNTH?Gs#_e0;k-KNiWas+b`3Cc11I&tzxShtm?(JIe*;
zs#v@T^;#y;KI_`njUR2bPDH9ECQLbUUs%g?{mq>b>sgdiw_b_-z{h%7Pj#wE(Ye*z
z-Hv#~rWr)<vhVXg*>rs_i{6dnSC1=syeiLB5xeUtCs>?XaXPX`<@3F3y>nAGw0+jT
zv_Pyoc@2};ze%Yl&5kbic)_+MVDZC1>ytD3ju_6EBNuM`{NbIgJ2z=dT{|B2Ev4b%
zMW>y?eu}5;b_v}skaqX{v~k|0&E}y~T5`<HX0SLi8M_)QOXes=E(zki<-x@3$@Tew
z1i!NKJP)&Jk;w<EMOboF{<S?ZN?)g%9Tv@~ps%Ybrt95#-_1x{Mbz1R#fSBcAA8hZ
z3h&65S#@*T8=gXw_&-g>eHEwFi~J&YIdX=sJ+F4uZc0jnpku4c{>nYQ`?Y7fo-{UC
zq;*m^ep!-bi@d7g#Pms1cn|M*c3OL5Jy%z+D$|$h9v)8?^<5K0L^ai#a(av=sdTn1
z-J_rylJlq6c!8kel$c8sRXZ)Wt4HRAe3MI9qrsOTCeaoeG?{tnGUgrUoU^;a7R>+n
zS$j(73>8Ihu^`{I3EnZ6qMc(W%}?Z8-P~dEBkYpD&Ai3Sjz}_!9u;51^w>0K>Yfh;
zjkgw`JSC%1d8}#X<%-RZgXZ{MT+w--+3TdKTEk@j{iQD5X?I_KI;F7dTDr*VlP6|6
z+d7&rV7wx~=KPd}hnu(NJ&LxAKmC#AY3l|N-r2n`fB0<a)QVla?LzB3z2+xt{zWl5
zKJC&g;eNH;bq`zEJfTmS4>@d$*3FwG`;&c%dmr=RW)08#cQ3Qfe|~wv^J&8OICm|c
zR6en2VSv%1MW0?ge17H&lUC${JG&0-wz$7)M*Nb@9anUEU*+@udLg8FD?vwu=SO+X
iKG}K&38~F}|Cpu4%wssRU!MZzUItHBKbLh*2~7Y7+h76!

literal 0
HcmV?d00001

diff --git a/src/static/tab-history.png b/src/static/tab-history.png
new file mode 100644
index 0000000000000000000000000000000000000000..5fa0ef7afd8f45688800af2470533ae195574d43
GIT binary patch
literal 820
zcmeAS@N?(olHy`uVBq!ia0vp^E<kL>!3-qrp7I+4sk#845LX~QbLPz1vuDqmH4Dgq
zkU$15fT>`{j2W1UA<B@YkTt^DpZ{2Y2f9GBB*-tA;kr;r%jQ_gFOT+e{OrlMHceYl
z<D$p&?)1!w3Om<MQF(dqNJ*wor`F};U-$lIU|_QGba4#vIR5t9?MaIa1lS(L3kalI
zXeh7?iu(Wkr@zDVf}_U~gYey3Ki@qg;`>+hawA*)a+5tX<{#la#xl*_YTM4{@^4FW
z6P?d4(yUpLlOd$va3-?j);p{JOJ)d8-y3}*tV=#}%cFb3hH76zj+{}n{9xO@jGKR@
zf?^t*Z|4oW(hl>>B`RqvIc7fj&pA_aR$j8=g(rWU743@Icz)mJWo9$H=5eCy)^d#{
z=h&Fb%QnuGc(hbt=?(o)fA8o7zV8e7;ZbZCeROJZd-dU<<!vDjMX&aMSbR~S#;|xn
zjQvwV0nfuvKIx^LGC8@tt!Cl_vBI53lRi(9s4nr3Y5O~UN6fMJTW{xn2(RE+{hMv8
ze0F|L!!6;XQnre_Z@p;CN$8x#sK*h%{pAYjB(+CQx>=GFzZ%u}RVl_bF0%gdeEPj*
z-d1Y)yB`;v->-e(>FinCVqf)s3fX^Db^V%!9F6fms}$dE*&M3K`+sJYV&LuPdQZ08
z7f-KCDf@HVLI23}sk^u{b>$Vg*G|}`{Lr8!&q1wK=f`G7*5ECnT$+u|C3n(tUDeWj
z40%pQI@Vo$_Exnucl$AgDvl!)r|uHo{#(@Ajeqr;tNe9U3Tlq$`$EL7o82=tC<v|n
zYpE0|rX1X>HF=7BW#?)hOJ#*~Ue%J^h3^y$i~K)Ud+jTFCs$G~_ICHWwkF}X+N;(5
z<M!Ps-=<jgWvlABZbR2yf99DRf8QB%{+Np;uPl>K8vm^HsXrRGSe7y0<N6SsxY;gs
hX6OvIy4o-7^DZ4roo^7h7?}7NJYD@<);T3K0RZn>g24a)

literal 0
HcmV?d00001

diff --git a/src/static/tab-score-s.png b/src/static/tab-score-s.png
new file mode 100644
index 0000000000000000000000000000000000000000..cdf5c11880dc3d4404c22d634b21c1b812bf5ca2
GIT binary patch
literal 1708
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

literal 0
HcmV?d00001

diff --git a/src/static/tab-score.png b/src/static/tab-score.png
new file mode 100644
index 0000000000000000000000000000000000000000..1b664a9e7146ecb3f5b1d22b7fe6432ddcf77e82
GIT binary patch
literal 1155
zcmeAS@N?(olHy`uVBq!ia0vp^E<kL>!3-qrp7I+4sY?MqA+A7r=FFM1X3YYU$e^#U
z56+!FYxdl^bAeoBWkB|f88fC#nF3cfd&x358z=<?^XAQiXaTbSJ2*htK!)1h|FgjW
z!dBh)Uv1z2?Bxe9r>Dbh0g3?C0|8K0<>3F~rMr_?o%nBWFL(GqPz}%opx*6ubx*^?
zf4aCB?EG51WM}2#E$6bbZg+KR0DWas666=m@KfPy(c9boEHCfR)D@`nQvZ0;RZRHV
z#!9vW-7AcIITwaWeR_IuUui+I&zBiZ|K3b*Yt4?Z(UrfowpDQXD!xMu49qH?E{-7{
z$FGLpoOa8Ar`OY|VFE8l3L{(E{qIY=XRdww|9_DBCgU!nji;wvZog-4ZDsyxs?Nza
zw$0AwuS+FgfBP1bomL|^HzBK-soLs&P1hmsU3(Z~??=y8`l`In;Yt45<AyoKytfXQ
z9yt-%+9}#nIO|wqf^UH0^ZrXcY?rRY@MQDp`TWc@xKzC5)+D8T1DU6jmfgKn)Wbb{
z{`2@>UGIet8eQAa!)0H$XI<Fp$<nPSCu-J6YMRQ5$Y?h*w+7bhlmxDPEfOEEdh%p*
z+_spB@(YfyI?@|wac_ox^oRD(<&%t^TlaBpTEaWO=D~k177ec*TZFPDuU%mc-v992
z!P=QM_L`pW?#q;y?L4r~xru9H-<~x0Gt&wcEd6-((`63M*`d^Z^M%*)Xs<doi%WI=
z!C$l_XE>*>Xs_h!bKtU-nKSRMbmPx2e?EQsb3`z$A(L}mhiOt&j@~N4A743k6s*6~
z<0<wfHE_*xwpL%~_h0A9srD_r<od|P&{J!7*yQYL%X&S}Z;8p#Q#jiHO%2QEe$@TS
z_+QYZHz#6P#I7j?+Nr4IZA=Z#6I5l4S1M@zb4^vHI^<2PUq7?Qf=N?WFNjEOVJUiK
zyYujNRza}`8&?H#I0*}RY%PB|{pc&Ff*R+=Yi`7ya^-pH=J7yX)As$xf9KBq+vv4J
zq~zL!125P2SgrebNI<AcruWkePRl;G8>)fxvWixVnJFu>F+V#g+UvK!D%m)8lcTN|
z57#X9lgE|iFKsDbP?Re?Iak_P>~dT&WAuZc497e8%a;ouWW6$t$-PA53u}I%t59_O
zl%zoE#YZMjo*cVc{qnL!B2%6UR&zI`zB3KmCTW|$K;y~@t;ku~Z&Wp}m^7p<-CeWh
zoADpEK9yC^QWcWiZ<ZTf+!K=frDIE8x{l_tCCqB8%(9lejSAPO-k5*)(phUaDXW74
z_MQtB%w%;nima}_bYB`{o7bpcD|>uy@8fA%ADCnNuE>ZTKIm`n`LXknM`D}ui+H}n
zYrU7rwS7&tv}>4=r?dQ+-(lv&JYS_x4nLOriypbA*00v`JpWUTbLKN?TNOd$(|1?f
eWd3LW!<P7gkNNyn*Ir=0WAJqKb6Mw<&;$U#Z6#^|

literal 0
HcmV?d00001

diff --git a/src/static/tab-user-s.png b/src/static/tab-user-s.png
new file mode 100644
index 0000000000000000000000000000000000000000..e6571f45c09e153518ee98428620048d6bfb8d89
GIT binary patch
literal 1647
zcmX|B4Ls9n9G}ig$_Nb^!otXT+m@FZw%P0$OF8du38hnKxbsqztn9L|yd)!(8)>1@
zI>mL2ZMw@vT&kOEh0Mz}S9vS!{?2vJ=kt7@@ALhAf8Xc%e4fweIZq8FX=(1#1c5+W
zWIsYMuo8gjuJIXw*a>YX5J-(d4LIlvY^|-WR~1AT7iX7$hiVCLXJ>~*BAuQ8Q#SMs
zbaHZ1O_NkpekuiN!=RcX{ciwDpG4xiQ|S$q)}}~+4j{lkRs8_2nkL%Y+uPdOuBUwp
zL8H;P>by40Yl`(opvBSA5kS=x9#A$yf&x$g+2H?W&Jimvx^xMATCRBkUGs9Huwngl
z5)m~yOd#M;6GQ7)8j#?!l07%_mnVooj+>jykyzKzgJ_&L(i4M3qg|eeaqs26e~<c#
z+I)sYI35@Kb-ZhI_&$F!YU&B0|0mpyYV5Ug&#H@_IT`NBiLM9tqsImaKMTCuZ+PEs
z@XAbaOG$D&9J4Pn6zxkujy}Y9G<lb?G0ZIYZ%??D=3~6DNbwyXR<=jp(4F=72u=$Q
zJOEN(lh4j=(FlCsUmYfD=Nms`2a$D`mWDdpTe*=aot24)<z;7cQ|M&q_8D2GwbiQZ
zkK1iW?JW#uCtFHc%vjfb=Gsc7OeT|x+M05_jE%HE5XwOy^&m3A=b)doEOZh7+*?0S
zU0t(u(<KCsR~SKRYCEZ9n5*sJ)wbSliu6z|yoP2P=nX3klre7@_Zh4n)8D!UXKH8j
zrO_$Lw4{NlcE_qeIgvZ$kW2?j>bJeTur5@}yiC9PP)+P-FK$hqg2fmuaWv|Oy4B|b
z7OJHeW}-KpragaPfi#&*Ki^!F_^`}>Rxy#?fEZpaf7ak1nw2UmHWKUcTY?M=PVuc-
z>;!XK`tB~sd)i%#11^#?+C?jCq^>slu?tBv7g>@X<*a6X)J^YtOmu`-0XsS^F~*e3
zOoF_|b1f@B)P84p=~vC16)a{4n{sy2a!{Kf7pCPY;983%`8gJ^Z1lJC%kVwD%k+{%
z-D?hJU(J?Gr1uK$URdmbdXheX$I)cwsl&SFjh5WpY!23aw7?R6HwVe0WLGypk`$F?
zC?>BksHlo-2CoRx>ORnU+OfAZaPAG?=WQ8s<OqK_3cW3%{V`-){?T75k64iVs)Rvd
z)G>Ed=hvWOTj<I?25C-G(9dLaz<Z0~^TxXoD}&$(5!H-p)XUlo(`gG!3kWIvJHl7T
zWET%JU|6?&E+fY`qN!Fj!p$2wenYEn7^ld)>XhR<#HmxxU(FRnwK$ZBU)tunidt(l
zD7zqFx*trZ?z-R_=q8c_YP`8^abA2h6ud~mIgWE<%DLTFSG}#0W*%#;DuvC6&t+B|
zIP+1+6E|rVxI$3G5VN<BoS!L1!pZw9`6j}sFFiuGUJ*eTb~prc#<B7~t}u(^7cLLf
z<q!rdY*Nyx`sxe1yU$lqf-TO7zt7SC2zmgk@cez@1U))rgx&Giv{h?>lLWIDovd}1
z_sfGj7POD);LXQMpvJ_f_hzp+_~(Pa@Bq`>g?%ZaRyBh-@n&PniT<F&0b;pLJBif&
zDza91(-e07hs@qqJ6Q4lE<ZVSTFP&PwY<;bcT1)t>Ow{`^n|=ORGiENtCiUQ=XOEc
z7D@o<){}Ai^GF^~G8rER8)lDfg^HA4?um>?{!zK}mF>27of+|P1nZlJ^-q7`62tr2
zF^3*&bauMx`Y*(*`ui9aAC1qA*x(fjEt{i8$0oB=-?fU)L8`40aa$70%eI@9BVHnS
zHbg-j$6hmS>CGHNqDHUD>XFu&T;Fptjv}?}?GJzJMoBUfwjE}}f*W0usQA72riPAf
zt#p27=W)7Fap@}~9VYV8eK3R3lV8_3SSZ(4PtH_>?mIa-b-a|6u;NME8Jj$A0=--v
zV%R@6iH~(mSOQ-&HHTze?NQY4%v<V!*2D+%?ljPsFVSm64d=d>o;Xxp`h^ICc(j{2
z7GCrsdaWv!1u@jYr)Q~XcTInc4O`yw!Y$KKduCuSJk=^MRuB7mOt<WLkKSd?2luO*
zn~$#?Gc(ZX5)NXe;(>B98E4kueEF5Ak7$|tvP1B6bS?_cMV(&Nb~ovZBX!b3fR77A
M_6;O7<7m160GLSlJpcdz

literal 0
HcmV?d00001

diff --git a/src/static/tab-user.png b/src/static/tab-user.png
new file mode 100644
index 0000000000000000000000000000000000000000..608491a375ded2f7ea0371370fcf91d4a009b5ad
GIT binary patch
literal 1043
zcmeAS@N?(olHy`uVBq!ia0vp^E<kL>!3-qrp7I+4sk#845LX~Qb?VfaNMP2iSwP<O
z>C@q25H>^{A~<{YY`83hfh;>?#tfh!goKC#NeBb33&ORw?*KVVvn0qbn1S`pudg3`
zO}WoJ*dugz?YyYNlGiTo*i@jN>Cvk2Vpdc2vZ*0<`lU(D^FM9)$iToX?djqe;&J?H
zxI5Eg10E9z1Jy49!3woM|Ff6J9@rsRbjPwWr^Q6-B*U2v0mWyNrJbzLt>@iz;QWR?
zN9MBZ==?r={^10FsT+qAw{!o0;=^X4UO%5-Kjvw{nb%hK>x{Vf+NRtQXV1KL?wXmm
zxcm3@S40?ZM^#SqDLp!^De1Pmw2`>S_O2PTH{AVFxG?mDkF-(L*3)g%n~n*J+O*es
zTwb{S$Fz=PK@yfrYnGf={&zc#sq**fWm7&SB~8EfRAthdNtKICjb1b#JD4i%uYDwD
zjft55>dO;896a2k#wh4NdrixvvdSrCimcPVw>!`GUayy9m@jAZa(Za4vX_y%aa8E6
zFB5O|GGDxLO7n<fv<~AOtr%OE5Oa;Es)9;+4nO{#uler2Ju7<GrI1OD>C;bsT~Wg7
zmGW3vde+Z%2h06`%63la?XIquy;u2c(&id7`vb*3tiheW{8fJsTwl6jPSLcMf}{6j
zH*%JVF@&*y{HpQo^Ble7qO+p{59a8Eh-TLZF4Wx?%NpEg%%U`}Ad1m$X{wKxUWC&;
z<Ku@Tdn?cM9g5V5$axgT#x>2;K_jGTJ1ckJ9yYCCTT1R4y*2eVJ$LcVk)B-jZ)?{4
z?U+*XLBRUovnL(L=N_80n5RB}kE^2$`^DTZQ$D`a*t+A?Ud9Xai-ZE^2~4Pdy-T%P
z+uBb`#yH#io5zRSt&<rO)sOUD2`pInzVfMXyDYn7&U&7o-F5{F7dyy$xdbcEnHslu
zKD$}L{P$V!7%hZECoNpk<E~|HKeP3o=ixi=pQ(A&Xl*@tneSD2pb?ktTgj6z^t#36
zubi4F7%1<@%#$JWs<r2|V|~R&gL4Nurd_{h`Jyjy-X_U8TV5`)zrdL%cH>yDr`zv!
zJ$;va<u|*e)vor)P)P_^>D0VCL+ARnG#S&s&kTjW7wr#w?z8&wzBADioV%~jG%Lwr
zW|DT$6Ruq!{dVSuSQfL3$BN(AJURdA{2l8;?tKT=i@U1vMk(b?a=o~ff8XQBd1r;c
zZ~nYr8|YtyyZ_&p?sHz-{af-6)Bf%SPZVF(d@x>fd`8PT`|t~#lRrLe{?Aa)sIXvF
VOC7(AJ}_@Fc)I$ztaD0e0s#DH@mc@?

literal 0
HcmV?d00001