首页接入数据

src/components/AppFooter.vue

@@ -1,83 +1,122 @@
 <script setup>
-const tabs = [
-  { image: "../static/tab-vip.png" },
-  { image: "../static/tab-point-book.png" },
-  { image: "../static/tab-mall.png" },
-];
+import { ref } from "vue";
 
-function handleTabClick(index) {
+import useStore from "@/store";
+import { storeToRefs } from "pinia";
+const { user } = storeToRefs(useStore());
+
+const props = defineProps({
+  selected: {
+    type: Number,
+    default: 0,
+  },
+  onSignin: {
+    type: Function,
+    default: () => {},
+  },
+  onChange: {
+    type: Function,
+    default: () => {},
+  },
+});
+
+const isIOS = uni.getDeviceInfo().osName === "ios";
+const tabs = {
+  VIP: "vip",
+  智能弓: "mall",
+  计分本: "tab-point-book",
+  勋章: "medal",
+  个人中心: "user",
+};
+const onTabChange = (index) => {
   if (index === 0) {
-    uni.navigateTo({
+    return uni.navigateTo({
       url: "/pages/be-vip",
     });
   }
   if (index === 1) {
-    uni.navigateTo({
-      url: "/pages/point-book",
-    });
-  }
-  if (index === 2) {
-    uni.navigateTo({
+    return uni.navigateTo({
       url: "/pages/device-intro",
     });
   }
-}
+  if (index === 2) {
+    return uni.navigateTo({
+      url: "/pages/point-book",
+    });
+  }
+  if (index === 4) {
+    if (!user.value.id) {
+      props.onSignin();
+      return;
+    }
+    return uni.navigateTo({
+      url: "/pages/user",
+    });
+  }
+  // props.onChange(index);
+};
 </script>
 
 <template>
-  <view class="footer">
-    <image class="footer-bg" src="../static/tab-bg.png" mode="widthFix" />
-    <view
-      v-for="(tab, index) in tabs"
-      :key="index"
-      class="tab-item"
-      @click="handleTabClick(index)"
-      :style="{
-        width: index === 1 ? '36%' : '20%',
-      }"
+  <view class="footer" :style="{ paddingBottom: isIOS ? '30rpx' : '0' }">
+    <button
+      hover-class="none"
+      v-for="(key, index) in Object.keys(tabs)"
+      :key="key"
+      @click="onTabChange(index)"
+      :class="index === 2 ? 'point-book-tab' : ''"
     >
-      <image :src="tab.image" mode="widthFix" />
-    </view>
+      <image
+        v-if="index !== 2"
+        :src="`../static/tab-${tabs[key]}.png`"
+        mode="widthFix"
+      />
+      <image v-else src="../static/tab-point-book.png" mode="widthFix" />
+      <text v-if="index !== 2">{{ key }}</text>
+    </button>
   </view>
 </template>
 
 <style scoped>
 .footer {
-  height: 120px;
+  height: 140rpx;
   width: 100vw;
   position: relative;
   display: flex;
-  justify-content: space-around;
-  align-items: center;
-  overflow: hidden;
-}
-.footer-bg {
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  z-index: 0;
-}
-.tab-item {
-  z-index: 1;
-  display: flex;
   justify-content: center;
+  align-items: center;
+  background: linear-gradient(
+      180deg,
+      rgba(70, 55, 34, 0.75) 0%,
+      rgba(5, 11, 25, 0.58) 77%
+    ),
+    #000000;
+  /* box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.06); */
 }
-.tab-item > image {
-  width: 65rpx;
+.footer > button {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 19%;
+  color: #8e7d5c;
 }
-.tab-item:last-child > image {
-  width: 85rpx;
+.footer > button > image {
+  width: 46rpx;
+  height: 46rpx;
 }
-.tab-item:nth-child(2) {
-  transform: translate(10%, 40%);
+.footer > button > text {
+  font-weight: 500;
+  font-size: 20rpx;
+  margin-top: 10rpx;
 }
-.tab-item:nth-child(3) {
-  margin-bottom: 25rpx;
+.point-book-tab {
+  overflow: unset;
+  margin: 0 1%;
 }
-.tab-item:nth-child(3) > image {
-  width: 140rpx;
-}
-.tab-item:nth-child(4) {
-  transform: translate(-10%, 44%);
+.point-book-tab > image {
+  width: 144rpx !important;
+  height: 144rpx !important;
+  transform: translateY(-20rpx);
 }
 </style>

src/components/Container.vue

@@ -25,10 +25,6 @@ const props = defineProps({
     type: Boolean,
     default: true,
   },
-  isHome: {
-    type: Boolean,
-    default: false,
-  },
   showBackToGame: {
     type: Boolean,
     default: false,
@@ -142,12 +138,7 @@ const goCalibration = async () => {
 <template>
   <view :style="{ paddingTop: capsuleHeight + 'px' }">
     <AppBackground :type="bgType" :bgColor="bgColor" />
-    <Header
-      v-if="!isHome"
-      :title="title"
-      :onBack="onBack"
-      :whiteBackArrow="whiteBackArrow"
-    />
+    <Header :title="title" :onBack="onBack" :whiteBackArrow="whiteBackArrow" />
     <BackToGame v-if="showBackToGame" />
     <scroll-view
       :scroll-y="scroll"
@@ -155,7 +146,7 @@ const goCalibration = async () => {
       :bounces="false"
       :show-scrollbar="false"
       :style="{
-        height: `calc(100vh - ${capsuleHeight + (isHome ? 0 : 50)}px - ${
+        height: `calc(100vh - ${capsuleHeight + 50}px - ${
           $slots.bottom && showBottom ? (isIOS ? '75px' : '65px') : '0px'
         })`,
       }"

src/components/LiveItem.vue

@@ -0,0 +1,142 @@
+<script setup>
+import { ref, onMounted } from "vue";
+
+const props = defineProps({});
+
+onMounted(async () => {});
+</script>
+
+<template>
+  <view class="live-item">
+    <view>
+      <image src="../static/user-icon-dark.png" mode="widthFix" />
+    </view>
+    <view>
+      <text>陈百强姓陈</text>
+      <view>
+        <text>节奏迅猛</text>
+        <text>节奏迅猛</text>
+      </view>
+      <view class="live-item-avatars">
+        <view :style="{ width: `${25 * 5 + 25}rpx` }">
+          <image
+            v-for="(avatar, i) in [1, 2, 3, 4, 5]"
+            :key="avatar"
+            :src="'../static/user-icon.png'"
+            :style="{
+              zIndex: i,
+              transform: `translateX(-${10 * i}rpx)`,
+            }"
+          />
+        </view>
+        <text>观战中...</text>
+      </view>
+    </view>
+    <view>
+      <view>
+        <image src="../static/race-title-bg.png" mode="widthFix" />
+        <text>1v1对抗</text>
+      </view>
+      <view>
+        <text>本轮环数</text>
+        <text>62</text>
+      </view>
+    </view>
+  </view>
+</template>
+
+<style scoped>
+.live-item {
+  display: flex;
+  align-items: center;
+  background: #252831;
+  padding: 25rpx;
+  border-radius: 25rpx;
+}
+.live-item > view:nth-child(1) {
+  width: 150rpx;
+  height: 150rpx;
+}
+.live-item > view:nth-child(1) > image {
+  width: 100%;
+  height: 100%;
+  border-radius: 25rpx;
+}
+.live-item > view:nth-child(2) {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  margin: 0 20rpx;
+}
+.live-item > view:nth-child(2) > text {
+  font-weight: 500;
+  font-size: 28rpx;
+  color: #ffffff;
+}
+.live-item > view:nth-child(2) > view:nth-child(2) {
+  font-weight: 500;
+  font-size: 20rpx;
+  color: #ffa61b;
+  margin-top: 10rpx;
+  margin-bottom: 20rpx;
+}
+.live-item > view:nth-child(2) > view:nth-child(2) > text {
+  line-height: 28rpx;
+  border-radius: 15rpx;
+  border: 2rpx solid #ffc05d;
+  padding: 0 10rpx;
+  margin-right: 10rpx;
+}
+.live-item-avatars {
+  display: flex;
+  align-items: center;
+  font-size: 20rpx;
+  color: #999999;
+}
+.live-item-avatars > view {
+  display: flex;
+  align-items: center;
+}
+.live-item-avatars > view > image {
+  width: 36rpx;
+  height: 36rpx;
+  border-radius: 50%;
+  flex-shrink: 0;
+  border: 1rpx solid #000;
+  box-sizing: border-box;
+}
+.live-item > view:nth-child(3) {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  justify-content: space-around;
+  height: 150rpx;
+}
+.live-item > view:nth-child(3) > view:first-child {
+  display: flex;
+  align-items: center;
+  font-size: 24rpx;
+  color: #c46e36;
+  transform: translateX(100rpx);
+}
+.live-item > view:nth-child(3) > view:first-child > text {
+  transform: translateX(-90rpx);
+}
+.live-item > view:nth-child(3) > view:first-child > image {
+  width: 160rpx;
+  height: 50rpx;
+}
+.live-item > view:nth-child(3) > view:last-child {
+  display: flex;
+  align-items: flex-end;
+  font-size: 20rpx;
+  color: #999999;
+}
+.live-item > view:nth-child(3) > view:last-child > text:last-child {
+  font-weight: 600;
+  font-size: 48rpx;
+  color: #ffd299;
+  margin-left: 10rpx;
+  line-height: 40rpx;
+}
+</style>

src/components/MyRank.vue

@@ -0,0 +1,204 @@
+<script setup>
+import { ref, watch } from "vue";
+
+import useStore from "@/store";
+import { storeToRefs } from "pinia";
+const store = useStore();
+const { getLvlName } = store;
+const { config, user } = storeToRefs(store);
+
+const props = defineProps({});
+
+const nextLvlPoints = ref(0);
+
+watch(
+  () => [config.value, user.value],
+  ([n_config, n_user]) => {
+    const rankInfos = n_config.randInfos || [];
+    if (n_user.id && rankInfos.length) {
+      rankInfos.some((r, index) => {
+        if (r.upgrade_scores && r.upgrade_scores > n_user.scores) {
+          nextLvlPoints.value = r.upgrade_scores;
+          return true;
+        }
+        return false;
+      });
+    }
+  },
+  {
+    immediate: true,
+    deep: true,
+  }
+);
+</script>
+
+<template>
+  <view class="my-rank">
+    <view>
+      <image :src="user.avatar || '../static/user-icon.png'" mode="widthFix" />
+      <view>
+        <text class="score color1">积分榜：分</text>
+        <text class="score color2">Mvp榜：次</text>
+        <text class="score color3">十环榜：次</text>
+      </view>
+    </view>
+    <view>
+      <text class="truncate">{{ user.nickName }}</text>
+      <image class="user-name-image" src="../static/vip1.png" mode="widthFix" />
+    </view>
+    <view>
+      <text>lv{{ user.lvl }}</text>
+      <view>
+        <view
+          :style="{
+            width: `${(Math.max(user.scores, 0) / nextLvlPoints) * 100}%`,
+          }"
+        ></view>
+        <text>{{ Math.max(user.scores, 0) }}/{{ nextLvlPoints }}</text>
+      </view>
+    </view>
+    <view>
+      <view>
+        <text>段位</text>
+        <text>{{ user.rankLvl ? getLvlName(user.rankLvl) : "暂无" }}</text>
+      </view>
+      <view>
+        <text>平均环数</text>
+        <text>{{ user.avg_ring ? user.avg_ring + "环" : "暂无" }}</text>
+      </view>
+      <view>
+        <text>胜率</text>
+        <text>{{
+          user.avg_win ? Number((user.avg_win * 100).toFixed(2)) + "%" : "暂无"
+        }}</text>
+      </view>
+    </view>
+  </view>
+</template>
+
+<style scoped>
+.my-rank {
+  display: flex;
+  flex-direction: column;
+  padding-left: 40rpx;
+}
+.my-rank > view:first-child {
+  display: flex;
+  align-items: center;
+}
+.my-rank > view:first-child > image {
+  width: 120rpx;
+  height: 120rpx;
+  border-radius: 50%;
+  margin-right: 30rpx;
+}
+.my-rank > view:first-child > view {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+.score {
+  line-height: 40rpx;
+  font-size: 20rpx;
+  color: #fff;
+  position: relative;
+  z-index: 1;
+}
+.score::before {
+  content: "";
+  width: calc(100% + 20rpx);
+  height: 10rpx;
+  border-radius: 10rpx;
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: -1;
+}
+.color1::before {
+  background-color: #c9ff7e;
+}
+.color2::before {
+  background-color: #fff14b;
+}
+.color3::before {
+  background-color: #7efff7;
+}
+.my-rank > view:nth-child(2) {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  margin-top: 10rpx;
+}
+.my-rank > view:nth-child(2) > text {
+  font-weight: 500;
+  font-size: 26rpx;
+  color: #ffffff;
+  margin-right: 20rpx;
+  max-width: 80%;
+}
+.my-rank > view:nth-child(2) > image {
+  width: 40rpx;
+  height: 40rpx;
+}
+.my-rank > view:nth-child(3) {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 10rpx;
+  font-weight: 500;
+  font-size: 16rpx;
+  color: #ffffff;
+}
+.my-rank > view:nth-child(3) > text:first-child {
+  width: 80rpx;
+  height: 20rpx;
+  background: #978eff;
+  border-radius: 16rpx;
+  line-height: 22rpx;
+  text-align: center;
+  text-align: center;
+}
+.my-rank > view:nth-child(3) > view {
+  position: relative;
+  width: calc(100% - 100rpx);
+  height: 20rpx;
+  background: #c8c8c8;
+  border-radius: 16rpx;
+}
+.my-rank > view:nth-child(3) > view > view {
+  background-color: #c7a670;
+  height: 20rpx;
+  border-radius: 16rpx;
+}
+.my-rank > view:nth-child(3) > view > text {
+  width: 100%;
+  text-align: center;
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+.my-rank > view:nth-child(4) {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  column-gap: 20rpx;
+  margin-top: 20rpx;
+}
+.my-rank > view:nth-child(4) > view {
+  height: 112rpx;
+  background: #f6f6f61a;
+  border-radius: 16rpx;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: 20rpx;
+  color: #999999;
+  line-height: 40rpx;
+}
+.my-rank > view:nth-child(4) > view > text:last-child {
+  color: #fff;
+  font-size: 22rpx;
+}
+</style>

src/components/NoticeBar.vue

@@ -0,0 +1,98 @@
+<script setup>
+import { ref, onMounted, onBeforeUnmount } from "vue";
+
+import useStore from "@/store";
+import { storeToRefs } from "pinia";
+const { user } = storeToRefs(useStore());
+
+const props = defineProps({});
+const list = [1, 2, 3, 4, 5];
+const timer = ref(null);
+const offset = ref(0);
+
+onMounted(async () => {
+  timer.value = setInterval(() => {
+    if (offset.value <= -100 * list.length) {
+      offset.value = 100;
+    } else {
+      offset.value -= 0.2;
+    }
+  }, 10);
+});
+onBeforeUnmount(() => {
+  clearInterval(timer.value);
+});
+</script>
+
+<template>
+  <view class="notice-bar">
+    <image src="../static/announce.png" mode="heightFix" />
+    <view>
+      <view
+        v-for="(item, index) in list"
+        :key="item"
+        :style="{
+          transform: `translateX(${offset}%)`,
+        }"
+      >
+        <image src="../static/user-icon.png" mode="widthFix" />
+        <text class="truncate">{{ index + 1 }}毛毛丛</text>
+        <text>成功晋升</text>
+        <text>荣耀王者</text>
+        <text>段位，从此横着走！</text>
+      </view>
+    </view>
+    <image src="../static/enter.png" mode="widthFix" />
+  </view>
+</template>
+
+<style scoped>
+.notice-bar {
+  margin-top: 10rpx;
+  background: linear-gradient(180deg, #2f2d2b 0%, #252831 100%);
+  border-radius: 25rpx;
+  height: 80rpx;
+  display: flex;
+  align-items: center;
+}
+.notice-bar > image:first-child {
+  height: 100%;
+}
+.notice-bar > view {
+  flex: 1;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+}
+.notice-bar > view > view {
+  flex-shrink: 0;
+  font-size: 24rpx;
+  padding-left: 15rpx;
+  color: #999;
+  display: flex;
+  align-items: center;
+}
+.notice-bar > view > view > image {
+  width: 48rpx;
+  height: 48rpx;
+  margin-right: 10rpx;
+  border-radius: 50%;
+}
+.notice-bar > view > view > text {
+  word-break: keep-all;
+  display: inline-block;
+}
+.notice-bar > view > view > text:nth-child(2) {
+  color: #fff;
+  width: 100rpx;
+  display: block;
+}
+.notice-bar > view > view > text:nth-child(4) {
+  color: #e7ba80;
+}
+.notice-bar > image:last-child {
+  width: 30rpx;
+  height: 30rpx;
+  margin: 0 20rpx;
+}
+</style>

src/components/TopRank.vue

@@ -0,0 +1,162 @@
+<script setup>
+import { ref, onMounted, onBeforeUnmount } from "vue";
+
+const props = defineProps({
+  data: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+const titles = ["积分榜", "MVP榜", "十环榜"];
+const selected = ref(0);
+const timer = ref(0);
+
+const onClick = (index) => {
+  selected.value = index;
+  clearInterval(timer.value);
+  timer.value = setInterval(() => {
+    selected.value = (selected.value + 1) % titles.length;
+  }, 3000);
+};
+onMounted(async () => {
+  timer.value = setInterval(() => {
+    selected.value = (selected.value + 1) % titles.length;
+  }, 3000);
+});
+onBeforeUnmount(() => {
+  clearInterval(timer.value);
+});
+</script>
+
+<template>
+  <view class="top-rank">
+    <view>
+      <button
+        hover-class="none"
+        v-for="(name, index) in titles"
+        :key="index"
+        @click="onClick(index)"
+        :style="{ color: selected === index ? '#E7BA80' : '#999' }"
+      >
+        {{ name }}
+      </button>
+    </view>
+    <swiper
+      :current="selected"
+      @change="(e) => (selected = e.detail.current)"
+      :style="{ width: '100%' }"
+    >
+      <swiper-item v-for="(list, index1) in data" :key="index1">
+        <view v-for="(item, index2) in list" :key="index2" class="rank-item">
+          <view>
+            <text>{{ index2 + 1 }}</text>
+            <image
+              :src="item.avatar || '../static/user-icon-dark.png'"
+              mode="widthFix"
+            />
+          </view>
+          <view>
+            <text>{{ item.name }}</text>
+            <text>积分：{{ item.totalScore }}</text>
+          </view>
+        </view>
+      </swiper-item>
+    </swiper>
+    <view>
+      <view
+        v-for="(item, index) in data"
+        :key="index"
+        :style="{
+          width: selected === index ? '20rpx' : '6rpx',
+          backgroundColor: selected === index ? '#656565;' : '#e4e4e4',
+        }"
+      />
+    </view>
+  </view>
+</template>
+
+<style scoped>
+.top-rank {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+.top-rank > view:first-child {
+  display: flex;
+  align-items: center;
+}
+.top-rank > view:first-child > button {
+  margin-right: 20rpx;
+  font-weight: 600;
+  font-size: 24rpx;
+}
+.rank-item {
+  display: flex;
+  align-items: center;
+  height: 80rpx;
+  margin-top: 20rpx;
+  margin-left: 1rpx;
+}
+.rank-item > view:first-child {
+  position: relative;
+  margin-right: 20rpx;
+}
+.rank-item > view:first-child > text {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 28rpx;
+  height: 28rpx;
+  line-height: 28rpx;
+  text-align: center;
+  background: #ffa711;
+  border-radius: 14rpx 0rpx 14rpx 0rpx;
+  color: #fff;
+  font-weight: 600;
+  font-size: 20rpx;
+}
+.rank-item > view:first-child > image {
+  width: 80rpx;
+  height: 80rpx;
+  border-radius: 20rpx;
+}
+.rank-item > view:last-child {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  align-items: flex-start;
+  height: 100%;
+}
+.rank-item > view:last-child > text:first-child {
+  font-weight: 500;
+  font-size: 24rpx;
+  color: #ffffff;
+  line-height: 34rpx;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 180rpx;
+}
+.rank-item > view:last-child > text:last-child {
+  background: rgb(255 250 234 / 0.1);
+  border-radius: 16rpx;
+  font-size: 20rpx;
+  color: #e7ba80;
+  line-height: 28rpx;
+  padding: 5rpx 10rpx;
+}
+.top-rank > view:last-child {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  margin-top: 20rpx;
+}
+.top-rank > view:last-child > view {
+  height: 6rpx;
+  border-radius: 3rpx;
+  background: #e4e4e4;
+  margin: 0 5rpx;
+  transition: all 0.3s ease;
+}
+</style>

src/pages/index.vue

@@ -1,12 +1,12 @@
 <script setup>
 import { ref, onMounted } from "vue";
 import { onShow, onShareAppMessage, onShareTimeline } from "@dcloudio/uni-app";
-import Container from "@/components/Container.vue";
 import AppFooter from "@/components/AppFooter.vue";
-import AppBackground from "@/components/AppBackground.vue";
-import UserHeader from "@/components/UserHeader.vue";
 import Signin from "@/components/Signin.vue";
-import BubbleTip from "@/components/BubbleTip.vue";
+import NoticeBar from "@/components/NoticeBar.vue";
+import TopRank from "@/components/TopRank.vue";
+import MyRank from "@/components/MyRank.vue";
+import LiveItem from "@/components/LiveItem.vue";
 
 import {
   getAppConfig,
@@ -15,24 +15,24 @@ import {
   getMyDevicesAPI,
   getDeviceBatteryAPI,
 } from "@/apis";
-import { topThreeColors } from "@/constants";
-import { canEenter } from "@/util";
+import { canEenter, capsuleHeight } from "@/util";
 
 import useStore from "@/store";
 import { storeToRefs } from "pinia";
 const store = useStore();
-const {
-  updateConfig,
-  updateUser,
-  updateDevice,
-  updateRank,
-  getLvlName,
-  updateOnline,
-} = store;
+const { updateConfig, updateUser, updateDevice, updateRank, updateOnline } =
+  store;
 const { user, device, rankData, online, game } = storeToRefs(store);
 
 const showModal = ref(false);
-const showGuide = ref(false);
+const selected = ref(0);
+const liveType = ref(0);
+const liveTypes = {
+  大神赛: "../static/dashen.png",
+  新人王: "../static/xinren.png",
+  女神赛: "../static/nvshen.png",
+};
+const ranks = ref([]);
 
 const toPage = async (path) => {
   if (!user.value.id) {
@@ -68,25 +68,22 @@ onShow(async () => {
   const [rankList, homeData] = await Promise.all(promises);
 
   console.log("排行数据", rankList);
+  ranks.value = [];
+  ranks.value.push((rankList.rank || []).slice(0, 3));
+  ranks.value.push((rankList.mvpRank || []).slice(0, 3));
+  ranks.value.push((rankList.ringRank || []).slice(0, 3));
   updateRank(rankList);
 
   if (homeData) {
     console.log("首页数据：", homeData);
     if (homeData.user) {
       updateUser(homeData.user);
-      if ("823,209,293,257".indexOf(homeData.user.id) !== -1) {
-        const show = uni.getStorageSync("show-the-user");
-        if (!show) {
-          showTheUser.value = true;
-          uni.setStorageSync("show-the-user", true);
-        }
-      }
-      if (homeData.user.trio <= 0) {
-        showGuide.value = true;
-        setTimeout(() => {
-          showGuide.value = false;
-        }, 3000);
-      }
+      // if (homeData.user.trio <= 0) {
+      //   showGuide.value = true;
+      //   setTimeout(() => {
+      //     showGuide.value = false;
+      //   }, 3000);
+      // }
       const devices = await getMyDevicesAPI();
       if (devices.bindings && devices.bindings.length) {
         updateDevice(
@@ -108,339 +105,293 @@ onMounted(async () => {
 
 onShareAppMessage(() => {
   return {
-    title: "智能真弓：实时捕捉+毫秒级同步，弓箭选手全球竞技！", // 分享卡片的标题
-    path: "/pages/index", // 用户点击分享卡片后跳转的页面路径
+    title: "智能真弓：实时捕捉+毫秒级同步，弓箭选手全球竞技！",
+    path: "/pages/index",
     imageUrl:
-      "https://static.shelingxingqiu.com/attachment/2025-09-12/dcqoz26q0268wxmzjg.png", // 分享卡片的配图，可以是本地或网络图片
+      "https://static.shelingxingqiu.com/attachment/2025-09-12/dcqoz26q0268wxmzjg.png",
   };
 });
 onShareTimeline(() => {
   return {
-    title: "智能真弓：实时捕捉+毫秒级同步，弓箭选手全球竞技！", // 分享到朋友圈的标题
-    query: "from=timeline", // 用户通过朋友圈点击后，在页面 onShow 的 options 中可以获取到的参数
+    title: "智能真弓：实时捕捉+毫秒级同步，弓箭选手全球竞技！",
+    query: "from=timeline",
     imageUrl:
-      "https://static.shelingxingqiu.com/attachment/2025-09-12/dcqoz26q0268wxmzjg.png", // 分享到朋友圈的配图
+      "https://static.shelingxingqiu.com/attachment/2025-09-12/dcqoz26q0268wxmzjg.png",
   };
 });
 </script>
 
 <template>
-  <Container :isHome="true" :showBackToGame="true">
-    <view class="container">
-      <view class="top-theme">
+  <view
+    class="container"
+    :style="{
+      paddingTop: capsuleHeight + 'px',
+      height: 'calc(100vh - ' + capsuleHeight + 'px)',
+    }"
+  >
+    <view :style="{ flex: 1, overflow: 'hidden' }">
+      <image
+        src="https://static.shelingxingqiu.com/attachment/2026-01-12/dfmg11wd20o1bagd4k.png"
+        mode="widthFix"
+        class="top-bg"
+      />
+      <view class="header">
         <image
-          src="https://static.shelingxingqiu.com/attachment/2025-12-31/dfc9dxrq4xn7e6y2pp.png"
+          src="https://static.shelingxingqiu.com/attachment/2026-01-12/dfmf4cjlds7oxd0tqd.png"
           mode="widthFix"
         />
       </view>
-      <UserHeader showRank :onSignin="() => (showModal = true)" />
-      <view :style="{ padding: '12px 10px' }">
-        <view class="feature-grid">
-          <view class="bow-card">
+      <scroll-view
+        class="body"
+        scroll-y
+        :show-scrollbar="false"
+        :enhanced="true"
+        :bounces="false"
+      >
+        <view class="main-btns" :style="{ marginBottom: '10rpx' }">
+          <view @click="() => toPage('/pages/my-device')">
             <image
-              v-if="online"
-              src="https://static.shelingxingqiu.com/attachment/2025-08-07/dbvt1o6dvhr2rop3kn.webp"
+              src="https://static.shelingxingqiu.com/attachment/2026-01-12/dfmgwjhsjc19tl0t7c.png"
               mode="widthFix"
-              @click="() => toPage('/pages/my-device')"
             />
-            <image
-              v-else
-              src="https://static.shelingxingqiu.com/attachment/2026-01-04/dffohwtk1gwh0xfa6h.png"
-              mode="widthFix"
-              @click="() => toPage('/pages/my-device')"
-            />
-            <block v-if="user.id">
+            <view v-if="user.id" class="device-info">
               <text v-if="!device.deviceId">绑定我的智能弓</text>
               <text v-else-if="!online">设备离线</text>
               <text v-else-if="online">设备在线</text>
-            </block>
-            <image
-              src="../static/first-try.png"
-              mode="widthFix"
-              @click="() => toPage('/pages/first-try')"
-            />
-            <BubbleTip v-if="showGuide" :location="{ top: '60%', left: '47%' }">
-              <text>新人必刷！</text>
-              <text>快来报到吧~</text>
-            </BubbleTip>
+            </view>
           </view>
-          <view class="play-card">
+          <view class="main-sub-btns">
+            <view @click="() => toPage('/pages/first-try')">
+              <image
+                src="https://static.shelingxingqiu.com/attachment/2026-01-12/dfmgwjhren1tfefi7k.png"
+                mode="widthFix"
+              />
+            </view>
             <view @click="() => toPage('/pages/practise')">
-              <image src="../static/my-practise.png" mode="widthFix" />
-            </view>
-            <view @click="() => toPage('/pages/friend-battle')">
-              <image src="../static/friend-battle.png" mode="widthFix" />
+              <image
+                src="https://static.shelingxingqiu.com/attachment/2026-01-12/dfmgwjht6q8l8zcduq.png"
+                mode="widthFix"
+              />
             </view>
           </view>
         </view>
-        <view class="ranking-section">
+        <view class="main-btns">
+          <view @click="() => toPage('/pages/ranking')">
+            <image
+              src="https://static.shelingxingqiu.com/attachment/2026-01-12/dfmgwjhsi4s5qa7hch.png"
+              mode="widthFix"
+            />
+          </view>
+          <view @click="() => toPage('/pages/friend-battle')">
+            <image
+              src="https://static.shelingxingqiu.com/attachment/2026-01-12/dfmgwjht17th6vl9a6.png"
+              mode="widthFix"
+            />
+          </view>
+        </view>
+        <!-- <NoticeBar /> -->
+        <view class="rank-info">
           <image
-            src="https://static.shelingxingqiu.com/attachment/2025-09-25/dd1p9ci9v7frcrsxhj.png"
+            src="../static/trophy-bg.png"
             mode="widthFix"
+            class="trophy-bg"
           />
-          <button
-            class="into-btn"
-            @click="() => toPage('/pages/ranking')"
-            hover-class="none"
-          ></button>
-          <view class="ranking-players" @click="toRankListPage">
-            <img src="../static/juezhanbang.png" mode="widthFix" />
-            <view class="divide-line"></view>
-            <view class="player-avatars">
-              <view
-                v-for="i in 6"
-                :key="i"
-                class="player-avatar"
-                :style="{
-                  zIndex: 8 - i,
-                  borderColor: rankData.rank[i - 1]
-                    ? topThreeColors[i - 1] || '#000'
-                    : '#000',
-                }"
-              >
-                <image v-if="i === 1" src="../static/champ1.png" />
-                <image v-if="i === 2" src="../static/champ2.png" />
-                <image v-if="i === 3" src="../static/champ3.png" />
-                <view v-if="i > 3">{{ i }}</view>
-                <image
-                  :src="
-                    rankData.rank[i - 1]
-                      ? rankData.rank[i - 1].avatar
-                      : '../static/user-icon-dark.png'
-                  "
-                  mode="aspectFill"
-                />
-              </view>
-              <view class="more-players">
-                <text>{{ rankData.rank.length }}</text>
-              </view>
+          <view class="rank-info-header">
+            <view>
+              <image src="../static/rank-title.png" mode="widthFix" />
+              <text>星球榜</text>
             </view>
+            <button hover-class="none" @click="toRankListPage">
+              <text>更多榜单</text>
+              <image src="../static/enter.png" mode="widthFix" />
+            </button>
           </view>
-          <view class="my-data">
-            <view @click="() => toPage('/pages/my-growth')">
-              <image src="../static/my-growth.png" mode="widthFix" />
+          <view class="rank-info-body">
+            <view :style="{ width: '45%' }">
+              <TopRank :data="ranks" />
             </view>
-            <view @click="() => toPage('/pages/ranking')">
-              <view>
-                <text>段位</text>
-                <text>{{
-                  user.rankLvl ? getLvlName(user.rankLvl) : "暂无"
-                }}</text>
-              </view>
-              <view>
-                <text>赛季平均环数</text>
-                <text>{{ user.avg_ring ? user.avg_ring + "环" : "暂无" }}</text>
-              </view>
-              <view>
-                <text>赛季胜率</text>
-                <text>{{
-                  user.avg_win
-                    ? Number((user.avg_win * 100).toFixed(2)) + "%"
-                    : "暂无"
-                }}</text>
-              </view>
+            <view :style="{ width: '55%' }">
+              <MyRank />
             </view>
           </view>
         </view>
-      </view>
+        <!-- <view class="live-bar">
+          <button
+            hover-class="none"
+            v-for="(item, index) in Object.keys(liveTypes)"
+            :key="index"
+            @click="liveType = index"
+            :style="{
+              color: liveType === index ? '#fff' : '#fff9',
+              background:
+                liveType === index
+                  ? 'linear-gradient( 133deg, #FFD19A 0%, #A17636 100%)'
+                  : '#252831',
+            }"
+          >
+            <image :src="liveTypes[item]" mode="widthFix" />
+            <text>{{ item }}</text>
+          </button>
+        </view>
+        <swiper
+          :current="liveType"
+          @change="(e) => (liveType = e.detail.current)"
+        >
+          <swiper-item>
+            <LiveItem />
+          </swiper-item>
+          <swiper-item>
+            <LiveItem />
+          </swiper-item>
+          <swiper-item>
+            <LiveItem />
+          </swiper-item>
+        </swiper> -->
+      </scroll-view>
       <Signin :show="showModal" :onClose="() => (showModal = false)" />
     </view>
-    <AppFooter />
-  </Container>
+    <AppFooter
+      :selected="selected"
+      :onChange="(index) => (selected = index)"
+      :onSignin="() => (showModal = true)"
+    />
+  </view>
 </template>
 
-<style scoped>
+<style scoped lang="scss">
 .container {
-  width: 100%;
-  height: calc(100% - 120px);
-}
-
-.feature-grid {
-  width: 100%;
-  display: flex;
-  margin-bottom: 5px;
-}
-
-.feature-grid > view {
-  position: relative;
+  width: 100vw;
+  height: 100vh;
   display: flex;
   flex-direction: column;
+  justify-content: space-between;
+  background-color: #000;
 }
-
-.bow-card {
-  width: 50%;
-  border-radius: 25rpx;
-  overflow: hidden;
-}
-
-.feature-grid > view > image {
+.top-bg {
   width: 100%;
-}
-
-.bow-card > text {
-  position: absolute;
-  top: 66%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  white-space: nowrap;
-  font-size: 13px;
-  color: #b3b3b3;
-}
-
-.bow-card > image:nth-child(3) {
-  transform: translateY(-1px);
-}
-
-.play-card {
-  width: 48%;
-  margin-left: 2%;
-}
-
-.play-card > view > image {
-  width: 100%;
-}
-
-.ranking-section {
-  border-radius: 15px;
-  padding: 15px;
-  position: relative;
-}
-
-.ranking-section > image {
-  position: absolute;
+  position: fixed;
   top: 0;
   left: 0;
-  width: 100%;
-  z-index: -1;
 }
-
-.into-btn {
-  position: absolute;
-  top: 40px;
-  left: calc(50% - 100px);
-  width: 200px;
-  height: 100px;
-}
-
-.ranking-players {
-  display: flex;
-  align-items: center;
-  padding-bottom: 20px;
-  margin-top: 42%;
-  border-bottom: 1rpx solid rgba(255, 255, 255, 0.2);
-}
-
-.ranking-players > image:first-child {
-  width: 28%;
-  transform: translateX(-10px) translateY(-8px);
-}
-
-.player-avatars {
-  display: flex;
-  align-items: center;
-}
-
-.divide-line {
-  width: 1px;
-  height: 35px;
-  background-color: #80808033;
-  margin-right: 8px;
-}
-
-.player-avatar,
-.more-players {
-  width: 82rpx;
-  height: 82rpx;
-  border-radius: 50%;
-  margin-right: -20rpx;
-  border: 1rpx solid #312f35;
+.header {
+  height: 50px;
   position: relative;
-  box-sizing: border-box;
-}
-
-.player-avatar > image:first-child,
-.player-avatar > view:first-child {
-  position: absolute;
-  top: -24rpx;
-  left: 22rpx;
-  width: 32rpx;
-  height: 32rpx;
-}
-.player-avatar > view:first-child {
-  border-radius: 50%;
-  background: #777777;
-  text-align: center;
-  font-size: 10px;
-  line-height: 18px;
-  width: 18px;
-  height: 18px;
-  color: #fff;
-}
-.player-avatar > image:last-child {
-  width: 100%;
-  height: 100%;
-  border-radius: 50%;
-}
-
-.more-players {
-  background: #3c445a;
-  font-size: 9px;
-  line-height: 80rpx;
-  text-align: center;
-  z-index: 1;
-}
-
-.more-players > text {
-  margin-left: 2px;
-  color: #fff;
-}
-.my-data {
   display: flex;
-  margin-top: 20px;
-  justify-content: space-between;
+  align-items: center;
+  padding-left: 30rpx;
 }
-.my-data > view:first-child {
-  width: 28%;
+.header > image {
+  width: 200rpx;
+  height: 50rpx;
 }
-.my-data > view:first-child > image {
+.body {
+  width: calc(100vw - 50rpx);
+  height: calc(100% - 25rpx);
+  padding: 0 25rpx;
+  position: relative;
+  margin-bottom: 25rpx;
+}
+.main-btns {
   width: 100%;
-  transform: translateX(-8px);
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 20rpx;
 }
-.my-data > view:nth-child(2) {
-  width: 68%;
-  font-size: 12px;
-  color: #fff6;
-  display: flex;
-  justify-content: space-between;
+.main-btns > view {
+  position: relative;
 }
-.my-data > view:nth-child(2) > view:nth-child(2) {
-  width: 38%;
+.main-btns image {
+  width: 100%;
 }
-.my-data > view:nth-child(2) > view {
-  width: 28%;
-  border-radius: 10px;
-  background: linear-gradient(180deg, #303b4c 30%, #2c384a 100%);
+.main-sub-btns {
   display: flex;
   flex-direction: column;
-  align-items: center;
+  justify-content: space-between;
+}
+.device-info {
+  position: absolute;
+  width: 100%;
+  bottom: 50rpx;
+  font-size: 24rpx;
+  color: #fff9;
+  display: flex;
   justify-content: center;
 }
-.my-data > view:nth-child(2) > view > text:last-child {
-  color: #fff;
-  line-height: 25px;
-  font-weight: 500;
+.rank-info {
+  margin-top: 10rpx;
+  background: linear-gradient(180deg, #2f2d2b 0%, #252831 100%);
+  border-radius: 20rpx;
+  position: relative;
+  padding: 20rpx;
+  display: flex;
+  flex-direction: column;
+  margin-top: 20rpx;
 }
-.top-theme {
+.trophy-bg {
   position: absolute;
+  top: 0;
+  right: 0;
+  width: 188rpx;
+  height: 192rpx;
+}
+.rank-info-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 30rpx;
+}
+.rank-info-header > view {
+  width: 186rpx;
+  height: 56rpx;
+  font-weight: 500;
+  font-size: 28rpx;
+  color: #ffffff;
+}
+.rank-info-header > view > image {
+  width: 100%;
+  height: 100%;
+}
+.rank-info-header > view > text {
+  line-height: 56rpx;
+  display: block;
+  transform: translate(75rpx, -65rpx);
+}
+.rank-info-header > button {
+  font-size: 20rpx;
+  color: #999999;
+  display: flex;
+  align-items: center;
+}
+.rank-info-header > button > image {
+  width: 30rpx;
+  height: 30rpx;
+}
+.rank-info-body {
+  display: flex;
+  align-items: center;
+}
+.rank-info-body > view:first-child {
+  border-right: 1rpx solid #e8e8e81a;
+  box-sizing: border-box;
+}
+.live-bar {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 20rpx;
+  margin: 20rpx 0;
+}
+.live-bar > button {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 100%;
-  height: 60px;
-  z-index: -1;
+  height: 68rpx;
+  border-radius: 34rpx;
+  font-weight: 600;
+  font-size: 28rpx;
 }
-.top-theme > image {
-  width: 300rpx;
-  transform: translate(-4%, -14%);
+.live-bar > button > image {
+  width: 46rpx;
+  height: 40rpx;
+  margin-right: 15rpx;
 }
 </style>