完成首页3个tab页的移动端改造

src/App.vue

@@ -4,3 +4,8 @@
   </App>
 </template>
 
+<style>
+* {
+  font-family: "PingFang SC";
+}
+</style>

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>

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,
       }"
     >

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>

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>

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"
     }

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

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"

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"

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"

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>

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;

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>

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>