完成首页UI

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);
-  overflow: hidden;
+  width: calc(100vw - 50rpx);
+  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%;