完成首页UI

src/components/AppFooter.vue

@@ -1,11 +1,19 @@
 <script setup>
 import { ref } from "vue";
 
+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: () => {},
@@ -32,6 +40,10 @@ const onTabChange = (index) => {
     });
   }
   if (index === 4) {
+    if (!user.value.id) {
+      props.onSignin();
+      return;
+    }
     return uni.navigateTo({
       url: "/pages/user",
     });
@@ -39,7 +51,9 @@ const onTabChange = (index) => {
   // props.onChange(index);
 };
 const getTabSrc = (key, index) => {
-  return `../static/tab-${tabs[key]}${props.selected === index ? "" : "-o"}.png`;
+  return `../static/tab-${tabs[key]}${
+    props.selected === index ? "" : "-o"
+  }.png`;
 };
 </script>
 

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,176 @@
+<script setup>
+import { ref, onMounted } from "vue";
+
+import useStore from "@/store";
+import { storeToRefs } from "pinia";
+const { user } = storeToRefs(useStore());
+
+const props = defineProps({});
+
+onMounted(async () => {});
+</script>
+
+<template>
+  <view class="my-rank">
+    <view>
+      <image src="../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>lv50</text>
+      <view>
+        <view :style="{ width: '50%' }"></view>
+        <text>12000/120000</text>
+      </view>
+    </view>
+    <view>
+      <view>
+        <text>段位</text>
+        <text>段位</text>
+      </view>
+      <view>
+        <text>平均环数</text>
+        <text>平均环数</text>
+      </view>
+      <view>
+        <text>胜率</text>
+        <text>胜率</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,197 @@
+<script setup>
+import { ref, onMounted, onBeforeUnmount } from "vue";
+
+const props = defineProps({});
+
+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>
+        <view class="rank-item">
+          <view>
+            <text>1</text>
+            <image src="../static/user-icon.png" mode="widthFix" />
+          </view>
+          <view>
+            <text>某某某</text>
+            <text>积分：300</text>
+          </view>
+        </view>
+        <view class="rank-item">
+          <view>
+            <text>1</text>
+            <image src="../static/user-icon.png" mode="widthFix" />
+          </view>
+          <view>
+            <text>某某某</text>
+            <text>积分：300</text>
+          </view>
+        </view>
+        <view class="rank-item">
+          <view>
+            <text>1</text>
+            <image src="../static/user-icon.png" mode="widthFix" />
+          </view>
+          <view>
+            <text>某某某</text>
+            <text>积分：300</text>
+          </view>
+        </view>
+      </swiper-item>
+      <swiper-item>
+        <view class="rank-item">
+          <view>
+            <text>1</text>
+            <image src="../static/user-icon.png" mode="widthFix" />
+          </view>
+          <view>
+            <text>某某某</text>
+            <text>积分：300</text>
+          </view>
+        </view>
+      </swiper-item>
+      <swiper-item>
+        <view class="rank-item">
+          <view>
+            <text>1</text>
+            <image src="../static/user-icon.png" mode="widthFix" />
+          </view>
+          <view>
+            <text>某某某</text>
+            <text>积分：300</text>
+          </view>
+        </view>
+      </swiper-item>
+    </swiper>
+    <view>
+      <view
+        v-for="(item, index) in titles"
+        :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;
+}
+.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

@@ -3,6 +3,10 @@ import { ref, onMounted } from "vue";
 import { onShow, onShareAppMessage, onShareTimeline } from "@dcloudio/uni-app";
 import AppFooter from "@/components/AppFooter.vue";
 import Signin from "@/components/Signin.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,
@@ -27,9 +31,16 @@ const {
 } = store;
 const { user, device, rankData, online, game } = storeToRefs(store);
 
+const isIOS = uni.getDeviceInfo().osName === "ios";
 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 toPage = async (path) => {
   if (!user.value.id) {
@@ -129,7 +140,7 @@ onShareTimeline(() => {
       height: 'calc(100vh - ' + capsuleHeight + 'px)',
     }"
   >
-    <view :style="{ height: '100%' }">
+    <view :style="{ flex: 1, overflow: 'hidden' }">
       <image
         src="https://static.shelingxingqiu.com/attachment/2026-01-12/dfmg11wd20o1bagd4k.png"
         mode="widthFix"
@@ -141,9 +152,120 @@ onShareTimeline(() => {
           mode="widthFix"
         />
       </view>
-      <view class="body"></view>
+      <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
+              src="https://static.shelingxingqiu.com/attachment/2026-01-12/dfmgwjhsjc19tl0t7c.png"
+              mode="widthFix"
+            />
+            <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>
+            </view>
+          </view>
+          <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="https://static.shelingxingqiu.com/attachment/2026-01-12/dfmgwjht6q8l8zcduq.png"
+                mode="widthFix"
+              />
+            </view>
+          </view>
+        </view>
+        <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="../static/trophy-bg.png"
+            mode="widthFix"
+            class="trophy-bg"
+          />
+          <view class="rank-info-header">
+            <view>
+              <image src="../static/rank-title.png" mode="widthFix" />
+              <text>星球榜</text>
+            </view>
+            <button hover-class="none">
+              <text>更多榜单</text>
+              <image src="../static/enter.png" mode="widthFix" />
+            </button>
+          </view>
+          <view class="rank-info-body">
+            <view :style="{ width: '45%' }">
+              <TopRank />
+            </view>
+            <view :style="{ width: '55%' }">
+              <MyRank />
+            </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
+      :selected="selected"
+      :onChange="(index) => (selected = index)"
+      :onSignin="() => (showModal = true)"
+    />
     <!-- <view class="top-theme">
         <image
           src="https://static.shelingxingqiu.com/attachment/2025-12-31/dfc9dxrq4xn7e6y2pp.png"
@@ -259,13 +381,13 @@ onShareTimeline(() => {
           </view>
         </view>
       </view> -->
-    <AppFooter :selected="selected" :onChange="(index) => (selected = index)" />
   </view>
 </template>
 
-<style scoped>
+<style scoped lang="scss">
 .container {
   width: 100vw;
+  height: 100vh;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
@@ -289,8 +411,114 @@ onShareTimeline(() => {
   height: 50rpx;
 }
 .body {
-  height: calc(100% - 50px);
+  width: calc(100vw - 50rpx);
-  overflow: hidden;
+  height: calc(100% - 25rpx);
+  padding: 0 25rpx;
+  position: relative;
+  margin-bottom: 25rpx;
+}
+.main-btns {
+  width: 100%;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 20rpx;
+}
+.main-btns > view {
+  position: relative;
+}
+.main-btns image {
+  width: 100%;
+}
+.main-sub-btns {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+.device-info {
+  position: absolute;
+  width: 100%;
+  bottom: 50rpx;
+  font-size: 24rpx;
+  color: #fff9;
+  display: flex;
+  justify-content: center;
+}
+.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;
+}
+.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;
+  height: 68rpx;
+  border-radius: 34rpx;
+  font-weight: 600;
+  font-size: 28rpx;
+}
+.live-bar > button > image {
+  width: 46rpx;
+  height: 40rpx;
+  margin-right: 15rpx;
 }
 /* .feature-grid {
   width: 100%;