完成新的首页布局

src/pages/index.vue

@@ -1,12 +1,8 @@
 <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 {
   getAppConfig,
@@ -16,7 +12,7 @@ import {
   getDeviceBatteryAPI,
 } from "@/apis";
 import { topThreeColors } from "@/constants";
-import { canEenter } from "@/util";
+import { canEenter, capsuleHeight } from "@/util";
 
 import useStore from "@/store";
 import { storeToRefs } from "pinia";
@@ -33,6 +29,7 @@ const { user, device, rankData, online, game } = storeToRefs(store);
 
 const showModal = ref(false);
 const showGuide = ref(false);
+const selected = ref(0);
 
 const toPage = async (path) => {
   if (!user.value.id) {
@@ -125,15 +122,34 @@ onShareTimeline(() => {
 </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="{ height: '100%' }">
+      <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/2026-01-12/dfmf4cjlds7oxd0tqd.png"
+          mode="widthFix"
+        />
+      </view>
+      <view class="body"></view>
+      <Signin :show="showModal" :onClose="() => (showModal = false)" />
+    </view>
+    <!-- <view class="top-theme">
         <image
           src="https://static.shelingxingqiu.com/attachment/2025-12-31/dfc9dxrq4xn7e6y2pp.png"
           mode="widthFix"
         />
       </view>
-      <UserHeader showRank :onSignin="() => (showModal = true)" />
       <view :style="{ padding: '12px 10px' }">
         <view class="feature-grid">
           <view class="bow-card">
@@ -242,20 +258,41 @@ onShareTimeline(() => {
             </view>
           </view>
         </view>
-      </view>
-      <Signin :show="showModal" :onClose="() => (showModal = false)" />
-    </view>
-    <AppFooter />
-  </Container>
+      </view> -->
+    <AppFooter :selected="selected" :onChange="(index) => (selected = index)" />
+  </view>
 </template>
 
 <style scoped>
 .container {
-  width: 100%;
-  height: calc(100% - 120px);
+  width: 100vw;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  background-color: #000;
 }
-
-.feature-grid {
+.top-bg {
+  width: 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+}
+.header {
+  height: 50px;
+  position: relative;
+  display: flex;
+  align-items: center;
+  padding-left: 30rpx;
+}
+.header > image {
+  width: 200rpx;
+  height: 50rpx;
+}
+.body {
+  height: calc(100% - 50px);
+  overflow: hidden;
+}
+/* .feature-grid {
   width: 100%;
   display: flex;
   margin-bottom: 5px;
@@ -442,5 +479,5 @@ onShareTimeline(() => {
 .top-theme > image {
   width: 300rpx;
   transform: translate(-4%, -14%);
-}
+} */
 </style>