添加全局容器组件

src/pages/ranking.vue

@@ -1,6 +1,5 @@
 <script setup>
-import AppBackground from "@/components/AppBackground.vue";
-import Header from "@/components/Header.vue";
+import Container from "@/components/Container.vue";
 import { ref } from "vue";
 
 const selectedIndex = ref(0);
@@ -17,10 +16,8 @@ const toMatchPage = () => {
 </script>
 
 <template>
-  <view class="container">
-    <AppBackground />
-    <Header title="排行赛" />
-    <view class="ranking-my-data">
+  <Container title="排行赛"
+    ><view class="ranking-my-data">
       <view>
         <view class="user-info">
           <view class="avatar" @click="toUserPage">
@@ -120,13 +117,10 @@ const toMatchPage = () => {
         <text>8850<text>分</text></text>
       </view>
     </view>
-  </view>
+  </Container>
 </template>
 
 <style scoped>
-.container {
-  padding-bottom: 15px;
-}
 .ranking-my-data,
 .ranking-data {
   display: flex;