20240830-0000

src/components/Body/Award.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="PD">
-     
-        <div class="title-container">
+
+        <div class="title-container"  data-aos="fade-right">
             <a>参赛奖品</a>
         </div>
         <v-card color="transparent" class="background-image">
@@ -10,7 +10,7 @@
                     <v-tab v-for="(item, index) in tabs" :key="index" prepend-icon="mdi-menu-right" :text="item.text"
                         :value="item.value" class="tab-item" style="color: #383838;"></v-tab>
                 </v-tabs>
-                <div class="tabs-content">
+                <div class="tabs-content"  data-aos="fade-up"  data-aos-duration="3000">
                     <v-tabs-window v-model="tab" class="full-height">
                         <v-tabs-window-item v-for="(item, index) in tabs" :key="index" :value="item.value">
                             <div class="tab-content">
@@ -86,7 +86,7 @@ export default {
 
 .PD {
     width: 100%;
-    height: 100hv;
+    height: 110vh;
     overflow: hidden;
 }
 
@@ -95,7 +95,7 @@ export default {
     background-size: contain;
     background-position: center;
     width: 100%;
-    height: 100hv;
+    height: 100vh;
 }
 
 .tabs-content {

src/components/Body/carousel.vue

@@ -1,6 +1,12 @@
 <template>
     <v-app>
-        <v-sheet class="full-screen-sheet" height="100vh" width="100vw" color="orange">
+        <v-sheet
+            v-show="isVisible"
+            class="full-screen-sheet"
+            height="100vh"
+            width="100vw"
+            color="orange"
+        >
             <wel />
             <div class="bg">
                 <h1>香橙派</h1>
@@ -12,12 +18,31 @@
 <script>
 export default {
     name: "FullScreenSheet",
+    data() {
+        return {
+            isVisible: true,
+        };
+    },
+    mounted() {
+        window.addEventListener('scroll', this.handleScroll);
+    },
+    beforeDestroy() {
+        window.removeEventListener('scroll', this.handleScroll);
+    },
+    methods: {
+        handleScroll() {
+            const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+            this.isVisible = scrollTop < window.innerHeight;
+        },
+    },
 };
 </script>
 
 <style scoped>
 .full-screen-sheet {
-    position: relative; /* 使子元素能够使用绝对定位 */
+    position: fixed;
+    top: 0;
+    left: 0;
 }
 
 .bg {

src/components/WebBody.vue

@@ -4,7 +4,6 @@ import Award from '@/components/Body/Award.vue';
 </script>
 
 <template>
-    <br><br>
     <carousel />
     <Time1 />
     <Rule />