添加ios首页和注册登录页

src/components/Header.vue

@@ -51,7 +51,9 @@ const toUserPage = () => {
 
 const signin = () => {
   if (!user.value.id) {
-    uni.$emit("point-book-signin");
+    uni.navigateTo({
+      url: "/pages/sign-in",
+    });
   }
 };
 

src/components/InputRow.vue

@@ -0,0 +1,84 @@
+<script setup>
+import { ref } from "vue";
+
+const props = defineProps({
+  type: {
+    type: String,
+    default: "text",
+  },
+  btnType: {
+    type: String,
+    default: "",
+  },
+  onChange: {
+    type: Function,
+    default: null,
+  },
+  placeholder: {
+    type: String,
+    default: "",
+  },
+  width: {
+    type: String,
+    default: "90vw",
+  },
+});
+
+const hide = ref(true);
+</script>
+
+<template>
+  <view class="container" :style="{ width }">
+    <input
+      :type="type"
+      @change="onChange"
+      :placeholder="placeholder"
+      placeholder-style="color: #999;"
+    />
+    <button v-if="btnType === 'code'" hover-class="none" class="get-code">
+      get verification code
+    </button>
+    <button
+      v-if="type === 'password'"
+      hover-class="none"
+      class="eye-btn"
+      @click="hide = !hide"
+    >
+      <image
+        :src="`../static/${hide ? 'eye-close' : 'eye-open'}.png`"
+        mode="widthFix"
+      />
+    </button>
+  </view>
+</template>
+
+<style scoped>
+.container {
+  height: 100rpx;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: #fff;
+  border-radius: 30rpx;
+  padding: 0 30rpx;
+  margin: 15rpx 0;
+  box-sizing: border-box;
+}
+.container > input {
+  width: 100%;
+  color: #333;
+  font-size: 26rpx;
+}
+.get-code {
+  color: #287fff;
+  font-size: 26rpx;
+  width: 80%;
+}
+.eye-btn {
+  padding: 20rpx;
+}
+.eye-btn > image {
+  width: 50rpx;
+  height: 32rpx;
+}
+</style>

src/components/SButton.vue

@@ -8,7 +8,7 @@ const props = defineProps({
   },
   rounded: {
     type: Number,
-    default: 10,
+    default: 45,
   },
   onClick: {
     type: Function,
@@ -58,7 +58,7 @@ const onBtnClick = debounce(async () => {
     hover-class="none"
     :style="{
       width: width,
-      borderRadius: rounded + 'px',
+      borderRadius: rounded + 'rpx',
       backgroundColor: disabled ? disabledColor : backgroundColor,
       color,
     }"
@@ -77,10 +77,10 @@ const onBtnClick = debounce(async () => {
 <style scoped>
 .sbtn {
   margin: 0 auto;
-  height: 44px;
+  height: 88rpx;
   line-height: 44px;
   font-weight: bold;
-  font-size: 15px;
+  font-size: 42rpx;
   display: flex;
   text-align: center;
   justify-content: center;

src/pages.json

@@ -6,6 +6,12 @@
     {
       "path": "pages/point-book"
     },
+    {
+      "path": "pages/sign-in"
+    },
+    {
+      "path": "pages/sign-up"
+    },
     {
       "path": "pages/about-us"
     },
@@ -113,7 +119,7 @@
     }
   ],
   "globalStyle": {
-    "backgroundColor": "@bgColor",
+    "backgroundColor": "#fff",
     "backgroundColorBottom": "@bgColorBottom",
     "backgroundColorTop": "@bgColorTop",
     "backgroundTextStyle": "@bgTxtStyle",

src/pages/point-book-home.vue

@@ -0,0 +1,384 @@
+<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 { getPointBookConfigAPI, getPointBookStatisticsAPI } from "@/apis";
+import { getElementRect } from "@/util";
+import { generateKDEHeatmapImage } from "@/kde-heatmap";
+
+import useStore from "@/store";
+import { storeToRefs } from "pinia";
+const store = useStore();
+const { user } = storeToRefs(store);
+
+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 startScoring = () => {
+  if (user.value.id) {
+    uni.navigateTo({
+      url: "/pages/point-book-create",
+    });
+  } else {
+    showModal.value = true;
+  }
+};
+
+const loadData = async () => {
+  const result = await getPointBookStatisticsAPI();
+  data.value = result;
+
+  const rect = await getElementRect(".heat-map");
+  let hot = 0;
+  if (result.checkInCount > -3 && result.checkInCount < 3) hot = 1;
+  else if (result.checkInCount >= 3) hot = 2;
+  else if (result.checkInCount >= 5) hot = 3;
+  else if (result.checkInCount === 7) hot = 4;
+  uni.$emit("update-hot", hot);
+  loadImage.value = true;
+  const generateHeatmapAsync = async () => {
+    const weekArrows = result.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("热力图图片地址:", finalPath);
+    } catch (error) {
+      console.error("生成热力图图片失败:", error);
+      loadImage.value = false;
+    }
+  };
+
+  // 异步生成热力图，不阻塞UI
+  generateHeatmapAsync();
+};
+
+onMounted(async () => {
+  const config = await getPointBookConfigAPI();
+  uni.setStorageSync("point-book-config", config);
+  if (config.targetOption && config.targetOption[0]) {
+    bowTargetSrc.value = config.targetOption[0].icon;
+  }
+});
+
+watch(
+  () => user.value.id,
+  (id) => {
+    if (id) loadData();
+  }
+);
+
+onShow(async () => {
+  if (user.value.id) loadData();
+});
+</script>
+
+<template>
+  <Container :bgType="4" bgColor="#F5F5F5" :whiteBackArrow="false" title="">
+    <view class="container">
+      <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>周一</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>周二</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>周三</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>周四</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>周五</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>周六</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>周日</text>
+        </view>
+      </view>
+      <view class="statistics">
+        <view>
+          <text>{{ data.todayTotalArrow || "-" }}</text>
+          <text>今日射箭(箭)</text>
+        </view>
+        <view>
+          <text>{{ data.totalArrow || "-" }}</text>
+          <text>累计射箭(箭)</text>
+        </view>
+        <view>
+          <text>{{ data.totalDay || "-" }}</text>
+          <text>已训练天数(天)</text>
+        </view>
+        <view>
+          <text>{{ data.averageRing || "-" }}</text>
+          <text>平均环数(箭)</text>
+        </view>
+        <view>
+          <text>{{
+            data.yellowRate !== undefined
+              ? Number((data.yellowRate * 100).toFixed(2)) + "%"
+              : "-"
+          }}</text>
+          <text>黄心率</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>生成中...</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>
+</template>
+
+<style scoped>
+.container {
+  width: calc(100% - 50rpx);
+  padding: 25rpx;
+}
+.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;
+  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;
+}
+</style>

src/pages/point-book.vue

@@ -1,24 +1,8 @@
 <script setup>
 import { ref, computed, onMounted, onBeforeUnmount, watch } from "vue";
-import { onShow, onShareAppMessage, onShareTimeline } from "@dcloudio/uni-app";
 import Container from "@/components/Container.vue";
-import PointRecord from "@/components/PointRecord.vue";
-import RingBarChart from "@/components/RingBarChart.vue";
-import SModal from "@/components/SModal.vue";
-import Signin from "@/components/Signin.vue";
-import ScreenHint2 from "@/components/ScreenHint2.vue";
-import RewardUs from "@/components/RewardUs.vue";
 
-import {
-  getHomeData,
-  getPointBookConfigAPI,
-  getPointBookListAPI,
-  getPointBookStatisticsAPI,
-} from "@/apis";
-
-import { getElementRect } from "@/util";
-
-import { generateKDEHeatmapImage } from "@/kde-heatmap";
+import { getHomeData } from "@/apis";
 
 import useStore from "@/store";
 import { storeToRefs } from "pinia";
@@ -26,115 +10,33 @@ const store = useStore();
 const { updateUser } = store;
 const { user } = storeToRefs(store);
 
+const activeTab = ref(0);
+
 const isIOS = computed(() => {
   const systemInfo = uni.getDeviceInfo();
   return systemInfo.osName === "ios";
 });
 
-const loadImage = ref(false);
-const showModal = ref(false);
-const showTip = ref(false);
-const data = ref({
-  weeksCheckIn: [],
-});
-
-const list = ref([]);
-const bowTargetSrc = ref("");
-const heatMapImageSrc = ref(""); // 存储热力图图片地址
-const canvasVisible = ref(false); // 控制canvas显示状态
-
-const toListPage = () => {
-  uni.navigateTo({
-    url: "/pages/point-book-list",
-  });
-};
-
-const onSignin = () => {
-  showModal.value = true;
-};
-
-const startScoring = () => {
-  if (user.value.id) {
-    uni.navigateTo({
-      url: "/pages/point-book-create",
+const onClickTab = (index) => {
+  if (index > 0 && !user.value.id) {
+    return uni.navigateTo({
+      url: "/pages/sign-in",
     });
-  } else {
-    showModal.value = true;
   }
-};
-
-const loadData = async () => {
-  const result = await getPointBookListAPI(1);
-  list.value = result.slice(0, 3);
-  const result2 = await getPointBookStatisticsAPI();
-  data.value = result2;
-
-  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("热力图图片地址:", finalPath);
-    } catch (error) {
-      console.error("生成热力图图片失败:", error);
-      loadImage.value = false;
-    }
-  };
-
-  // 异步生成热力图，不阻塞UI
-  generateHeatmapAsync();
+  activeTab.value = index;
 };
 
 watch(
   () => user.value.id,
-  (id) => {
-    if (id) loadData();
+  async (id) => {
+    if (id) {
+      const data = await getHomeData();
+      if (data.user) updateUser(data.user);
+    }
   }
 );
 
-onShow(async () => {
-  if (user.value.id) loadData();
-});
-
 onMounted(async () => {
-  uni.$on("point-book-signin", onSignin);
   const token = uni.getStorageSync(
     `${uni.getAccountInfoSync().miniProgram.envVersion}_token`
   );
@@ -142,341 +44,66 @@ onMounted(async () => {
     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;
-  }
-});
-
-onBeforeUnmount(() => {
-  uni.$off("point-book-signin", onSignin);
-});
-
-onShareAppMessage(() => {
-  return {
-    title: "高效记录每一次射箭，深度分析助你提升！",
-    path: "pages/point-book",
-    imageUrl:
-      "https://static.shelingxingqiu.com/attachment/2025-09-22/dcz4m4nbgycqqwknrv.png",
-  };
-});
-onShareTimeline(() => {
-  return {
-    title: "高效记录每一次射箭，深度分析助你提升！",
-    query: "from=timeline",
-    imageUrl:
-      "https://static.shelingxingqiu.com/attachment/2025-09-22/dcz4m4nbgycqqwknrv.png",
-  };
 });
 </script>
 
 <template>
   <Container :bgType="4" bgColor="#F5F5F5" :whiteBackArrow="false" title="">
-    <view class="container">
-      <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>周一</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>周二</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>周三</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>周四</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>周五</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>周六</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>周日</text>
-        </view>
-      </view>
-      <view class="statistics">
-        <view>
-          <text>{{ data.todayTotalArrow || "-" }}</text>
-          <text>今日射箭(箭)</text>
-        </view>
-        <view>
-          <text>{{ data.totalArrow || "-" }}</text>
-          <text>累计射箭(箭)</text>
-        </view>
-        <view>
-          <text>{{ data.totalDay || "-" }}</text>
-          <text>已训练天数(天)</text>
-        </view>
-        <view>
-          <text>{{ data.averageRing || "-" }}</text>
-          <text>平均环数(箭)</text>
-        </view>
-        <view>
-          <text>{{
-            data.yellowRate !== undefined
-              ? Number((data.yellowRate * 100).toFixed(2)) + "%"
-              : "-"
-          }}</text>
-          <text>黄心率</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">
+    <view class="container"> </view>
+    <view class="tabbar">
+      <button hover-class="none" @click="onClickTab(0)">
         <image
-          :src="bowTargetSrc || '../static/bow-target.png'"
+          :src="`../static/tab1${activeTab === 0 ? '-s' : ''}.png`"
           mode="widthFix"
         />
+        <text :style="{ color: activeTab === 0 ? '#333' : '#999' }">Score</text>
+      </button>
+      <button hover-class="none" @click="onClickTab(1)">
         <image
-          v-if="heatMapImageSrc"
-          :src="heatMapImageSrc"
-          mode="aspectFill"
+          :src="`../static/tab2${activeTab === 1 ? '-s' : ''}.png`"
+          mode="widthFix"
         />
-        <view v-if="loadImage" class="load-image">
-          <text>生成中...</text>
-        </view>
-        <canvas
-          id="heatMapCanvas"
-          canvas-id="heatMapCanvas"
-          type="2d"
-          style="
-            width: 100%;
-            height: 100%;
-            position: absolute;
-            top: -1000px;
-            left: 0;
-            z-index: 2;
-          "
+        <text :style="{ color: activeTab === 1 ? '#333' : '#999' }"
+          >History</text
+        >
+      </button>
+      <button hover-class="none" @click="onClickTab(2)">
+        <image
+          :src="`../static/tab3${activeTab === 2 ? '-s' : ''}.png`"
+          mode="widthFix"
         />
-      </view>
-      <view class="reward" v-if="data.totalArrow">
-        <button hover-class="none" @click="showTip = true">
-          <image src="../static/reward-us.png" mode="widthFix" />
-        </button>
-      </view>
-      <RingBarChart :data="data.ringRate" v-if="user.id" />
-      <view class="title" v-if="user.id">
-        <image src="../static/point-book-title2.png" mode="widthFix" />
-      </view>
-      <block v-for="(item, index) in list" :key="index">
-        <PointRecord :data="item" />
-      </block>
-      <view
-        class="see-more"
-        @click="toListPage"
-        v-if="list.length"
-        :style="{ marginBottom: isIOS ? '10rpx' : 0 }"
-      >
-        <text>查看所有记录</text>
-        <image src="../static/enter-arrow-blue.png" mode="widthFix" />
-      </view>
+        <text :style="{ color: activeTab === 2 ? '#333' : '#999' }"
+          >Profile</text
+        >
+      </button>
     </view>
-    <SModal :show="showModal" :onClose="() => (showModal = false)" :noBg="true">
-      <Signin :onClose="() => (showModal = false)" :noBg="true" />
-    </SModal>
-    <ScreenHint2 :show="showTip" :onClose="() => (showTip = false)">
-      <RewardUs :show="showTip" :onClose="() => (showTip = false)" />
-    </ScreenHint2>
   </Container>
 </template>
 
 <style scoped>
 .container {
   width: calc(100% - 50rpx);
+  height: 100%;
   padding: 25rpx;
 }
-.statistics {
-  border-radius: 25rpx;
-  border-bottom-left-radius: 50rpx;
-  border-bottom-right-radius: 50rpx;
-  border: 4rpx solid #fed848;
+.tabbar {
+  width: 100%;
+  height: 140rpx;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
   background: #fff;
-  font-size: 22rpx;
-  display: flex;
-  flex-wrap: wrap;
-  padding: 25rpx 0;
-  margin-bottom: 10rpx;
+  padding-bottom: 20rpx;
 }
-.statistics > view {
-  width: 33.33%;
+.tabbar > button {
   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;
-  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;
-}
-.reward {
-  width: 100%;
-  display: flex;
-  justify-content: flex-end;
-  margin-top: -120rpx;
-  position: relative;
-  z-index: 10;
-}
-.reward > button {
-  width: 100rpx;
-}
-.reward > button > image {
-  width: 100%;
-  height: 100%;
+.tabbar > button > image {
+  margin-bottom: 10rpx;
+  width: 60rpx;
+  height: 60rpx;
 }
 </style>

src/pages/sign-in.vue

@@ -0,0 +1,137 @@
+<script setup>
+import { ref } from "vue";
+import InputRow from "@/components/InputRow.vue";
+import SButton from "@/components/SButton.vue";
+
+const checked = ref(false);
+
+const toSignUpPage = () => {
+  uni.navigateTo({
+    url: "/pages/sign-up",
+  });
+};
+</script>
+
+<template>
+  <view class="container">
+    <image class="app-logo" src="../static/logo.png" mode="widthFix" />
+    <text class="app-name">ARCX</text>
+    <InputRow type="text" placeholder="email" width="80vw" />
+    <InputRow type="password" placeholder="password" width="80vw" />
+    <view class="btn-row">
+      <button hover-class="none">Forgot Password?</button>
+    </view>
+    <SButton width="80vw">login</SButton>
+    <button
+      hover-class="none"
+      @click.stop="checked = !checked"
+      class="agreement"
+    >
+      <image :src="`../static/${checked ? 'checked' : 'unchecked'}.png`" />
+      <text>i read and accept</text>
+      <button hover-class="none" @click.stop="">user agreement</button>
+      <text>and</text>
+      <button hover-class="none" @click.stop="">privacy policy</button>
+    </button>
+    <view class="thrid-signin">
+      <button hover-class="none">
+        <image src="../static/google-icon.png" mode="widthFix" />
+        <text>login with google</text>
+      </button>
+      <button hover-class="none">
+        <image src="../static/apple-icon.png" mode="widthFix" />
+        <text>login with apple</text>
+      </button>
+    </view>
+    <view class="to-sign-up">
+      <text>don't have an account? </text>
+      <button hover-class="none" @click.stop="toSignUpPage">sign up ></button>
+    </view>
+  </view>
+</template>
+
+<style scoped>
+.container {
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background: #f5f5f5;
+}
+.app-logo {
+  width: 176rpx;
+  height: 176rpx;
+  margin-top: 40rpx;
+}
+.app-name {
+  font-weight: 600;
+  font-size: 40rpx;
+  color: #333333;
+  margin: 20rpx 0;
+}
+.btn-row {
+  width: 80vw;
+  display: flex;
+  justify-content: flex-end;
+}
+.btn-row > button {
+  font-size: 24rpx;
+  color: #287fff;
+  margin-bottom: 25rpx;
+  line-height: 34rpx;
+}
+.agreement {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  font-size: 24rpx;
+  margin-top: 24rpx;
+  margin-bottom: 50rpx;
+  color: #999999;
+}
+.agreement > image:first-child {
+  width: 32rpx;
+  height: 32rpx;
+  margin-right: 10rpx;
+}
+.agreement > button {
+  color: #333;
+  font-size: 24rpx;
+  margin: 0 10rpx;
+}
+.thrid-signin {
+  width: 80vw;
+  display: flex;
+  flex-direction: column;
+  margin: 60rpx 0;
+}
+.thrid-signin > button {
+  width: 100%;
+  height: 88rpx;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 45rpx;
+  background-color: #fff;
+  font-size: 30rpx;
+  color: #333333;
+  margin: 20rpx 0;
+}
+.thrid-signin > button > image {
+  width: 40rpx;
+  margin-right: 20rpx;
+}
+.to-sign-up {
+  font-size: 24rpx;
+  color: #666666;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.to-sign-up > button {
+  font-size: 24rpx;
+  color: #287fff;
+  margin-left: 20rpx;
+}
+</style>

src/pages/sign-up.vue

@@ -0,0 +1,91 @@
+<script setup>
+import { ref } from "vue";
+import InputRow from "@/components/InputRow.vue";
+import SButton from "@/components/SButton.vue";
+
+const toSignInPage = () => {
+  uni.navigateBack();
+};
+</script>
+
+<template>
+  <view class="container">
+    <text class="title">Sign up</text>
+    <text class="sub-title">Create an Arcx account</text>
+    <InputRow placeholder="name" width="80vw" />
+    <InputRow placeholder="email" width="80vw" />
+    <InputRow placeholder="verification code" type="number" width="80vw" btnType="code" />
+    <InputRow type="password" placeholder="password" width="80vw" />
+    <InputRow type="password" placeholder="confirm password" width="80vw" />
+    <view :style="{ height: '20rpx' }"></view>
+    <SButton width="80vw">login</SButton>
+    <view class="agreement">
+      <text>By clicking “Sign Up”, you agree to our</text>
+      <button hover-class="none" @click.stop="">user agreement</button>
+      <text>and</text>
+      <button hover-class="none" @click.stop="">privacy policy</button>
+    </view>
+    <view class="to-sign-up">
+      <text>don't have an account? </text>
+      <button hover-class="none" @click.stop="toSignInPage">sign in ></button>
+    </view>
+  </view>
+</template>
+
+<style scoped>
+.container {
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background: #f5f5f5;
+}
+.title {
+  font-weight: 600;
+  font-size: 48rpx;
+  color: #333333;
+  width: 80vw;
+  margin-bottom: 10rpx;
+}
+.sub-title {
+  font-size: 24rpx;
+  color: #666666;
+  width: 80vw;
+  margin-bottom: 20rpx;
+}
+.agreement {
+  width: 80vw;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 24rpx;
+  margin-top: 24rpx;
+  margin-bottom: 50rpx;
+  color: #999999;
+  flex-wrap: wrap;
+}
+.agreement > image:first-child {
+  width: 32rpx;
+  height: 32rpx;
+  margin-right: 10rpx;
+}
+.agreement > button {
+  color: #333;
+  font-size: 24rpx;
+  margin: 0 10rpx;
+}
+.to-sign-up {
+  font-size: 24rpx;
+  color: #999;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 100rpx;
+}
+.to-sign-up > button {
+  font-size: 24rpx;
+  color: #287fff;
+  margin-left: 20rpx;
+}
+</style>