完成新的首页布局

src/components/AppFooter.vue

@@ -1,83 +1,106 @@
 <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) {
-  if (index === 0) {
-    uni.navigateTo({
-      url: "/pages/be-vip",
+const props = defineProps({
+  selected: {
+    type: Number,
+    default: 0,
+  },
+  onChange: {
+    type: Function,
+    default: () => {},
+  },
 });
-  }
+
+const isIOS = uni.getDeviceInfo().osName === "ios";
+const tabs = {
+  首页: "home",
+  智能弓: "mall",
+  计分本: "tab-point-book",
+  勋章: "medal",
+  个人中心: "user",
+};
+const onTabChange = (index) => {
   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) {
+    return uni.navigateTo({
+      url: "/pages/user",
+    });
+  }
+  // props.onChange(index);
+};
+const getTabSrc = (key, index) => {
+  return `../static/tab-${tabs[key]}${props.selected === index ? "" : "-o"}.png`;
+};
 </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="getTabSrc(key, index)" mode="widthFix" />
+      <image v-else src="../static/tab-point-book.png" mode="widthFix" />
+      <text
+        v-if="index !== 2"
+        :style="{ color: index === selected ? '#f7cb74' : '#8E7D5C' }"
+        >{{ 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;
+  background: linear-gradient(
+      180deg,
+      rgba(70, 55, 34, 0.75) 0%,
+      rgba(5, 11, 25, 0.58) 100%
+    ),
+    #000000;
+  box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.06);
 }
-.footer-bg {
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  z-index: 0;
-}
-.tab-item {
-  z-index: 1;
+.footer > button {
   display: flex;
+  flex-direction: column;
+  align-items: center;
   justify-content: center;
+  width: 20%;
 }
-.tab-item > image {
-  width: 65rpx;
+.footer > button > image {
+  width: 44rpx;
+  height: 44rpx;
 }
-.tab-item:last-child > image {
-  width: 85rpx;
+.footer > button > text {
+  font-weight: 500;
+  font-size: 20rpx;
+  margin-top: 10rpx;
 }
-.tab-item:nth-child(2) {
-  transform: translate(10%, 40%);
+.point-book-tab {
+  overflow: unset;
 }
-.tab-item:nth-child(3) {
-  margin-bottom: 25rpx;
-}
-.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(-10rpx);
 }
 </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/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> -->
+    <AppFooter :selected="selected" :onChange="(index) => (selected = index)" />
   </view>
-      <Signin :show="showModal" :onClose="() => (showModal = false)" />
-    </view>
-    <AppFooter />
-  </Container>
 </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>