ffi

src/components/about/IntroductionBanner.vue

@@ -98,7 +98,9 @@ onUnmounted(() => {
   .banner-boder {
     position: absolute;
     left: 0;
-    height: 79px;
+    right: 0;
+    width: 100%;
+    // height: 79px;
     bottom: -1px;
   }
   .introduction-bg {

src/components/home/Banner.vue

@@ -91,6 +91,7 @@ import Slogan from "./Slogan.vue";
       .download-item-andriod {
         width:207px;
         height: 62px;
+        opacity: 0.9;
         background-color: #161515;
         cursor: pointer;
         position: relative;

src/components/layout/NavBar.vue

@@ -122,16 +122,15 @@ const showNavMenu = ref(false);
 const activeIndex = ref(0);
 const navList = reactive([
   { id: 0, name: "HOME", path: "/home" },
-  { id: 1, name: "PRE-ORDER", path: "/pre" },
+  { id: 1, name: "ABOUT", path: "/about" },
-  { id: 2, name: "ABOUT", path: "/about" },
   {
-    id: 3,
+    id: 2,
     name: "MARKETPLACE",
     path: "/marketpalce",
     submenu: [{ label: "Coming soon", link: "/products/1" }],
   },
   {
-    id: 4,
+    id: 3,
     name: "COMMUNITY",
     path: "/contact",
     submenu: [
@@ -149,12 +148,12 @@ const navList = reactive([
       { label: "Discord", link: "https://discord.com/invite/fNSn2NHUvf" },
     ],
   },
-  { id: 5, name: "BETA TEST II", path: "/" },
+  { id: 4, name: "BETA TEST II", path: "/" },
 ]);
 
 function handNavCurent(nav) {
   activeIndex.value = nav.id;
-  if (nav.id === 0 || nav.id === 1 || nav.id === 2 ||nav.id === 5 ) {
+  if (nav.id === 0 || nav.id === 1 || nav.id === 4 ) {
     router.push(nav.path);
   }
 }

src/router/index.js

@@ -1,21 +1,23 @@
 import { createRouter, createWebHistory } from 'vue-router';
+import Home from '../views/HomeView.vue';
+import GamePromotionEvent from '../views/GamePromotionEvent.vue';
 
 const routes = [
   {
     path: '/',
     name: 'game',
-    component: () => import(/* webpackChunkName "game" */ '../views/GamePromotionEvent.vue'),
+    component:GamePromotionEvent,
-  },
-  {
-    path: '/pre',
-    name: 'pre',
-    component: () => import(/* webpackChunkName "pre" */ '../views/GameEventBookingView.vue'),
   },
   {
     path: '/home',
     name: 'home',
-    component: () => import(/* webpackChunkName "home" */ '../views/HomeView.vue'),
+    component: Home,
   },
+  //  {
+  //   path: '/pre',
+  //   name: 'pre',
+  //   component: () => import(/* webpackChunkName "pre" */ '../views/GameEventBookingView.vue'),
+  // },
   {
     path: '/about',
     name: 'about',

src/views/GameEventBookingView.vue

@@ -1,34 +1,32 @@
 <template>
-  <div class="container">
+  <div class="content pt-40 pl-10 pr-10 pb-10" @wheel="handleScroll">
-    <div class="background"></div>
+    <div class="left">左边的内容</div>
-    <div class="content" @scroll="handleScroll">
+    <div class="right">
-      <div class="right-content" v-show="activeDiv === 0">
+      <div v-show="isContentA">内容a</div>
-        <p v-for="i in 50" :key="'A' + i">这是 A 段落 {{ i }}</p>
+      <div v-show="!isContentA">内容b</div>
-      </div>
-      <div class="right-content" v-show="activeDiv === 1">
-        <p v-for="i in 50" :key="'B' + i">这是 B 段落 {{ i }}</p>
-      </div>
     </div>
+    <div class="background"></div>
   </div>
 </template>
 
 <script setup>
-import { ref, computed, onMounted, onUnmounted } from "vue";
+import { ref } from "vue";
-const activeDiv = ref(0);
 
-function handleScroll(e) {
+const isContentA = ref(true);
-  const scrollTop = e.target.scrollTop;
+
-  activeDiv.value = scrollTop >= window.innerHeight ? 1 : 0;
+const handleScroll = (event) => {
-}
+  if (event.deltaY !== 0) {
+    isContentA.value = !isContentA.value;
+  }
+};
 </script>
 
-<style lang="scss" scoped>
+<style scoped>
-.container {
+.content {
-  position: relative;
+  display: flex;
   height: 100vh;
-  overflow: hidden;
+  position: relative;
 }
-
 .background {
   position: absolute;
   top: 0;
@@ -42,18 +40,11 @@ function handleScroll(e) {
   background-size: cover;
 }
 
-.content {
+.left {
-  position: relative;
+  width: 50%;
-  height: 100%;
-  overflow-y: auto;
-  padding: 1rem;
 }
 
-.right-content {
+.right {
-  display: none;
+  width: 50%;
-}
-
-.right-content {
-  display: block;
 }
 </style>

tailwind.config.js

@@ -1,6 +1,5 @@
 /** @type {import('tailwindcss').Config} */
 export default {
-  darkMode: false, // or 'media' or 'class',
   content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
   theme: {
     extend: {},