首页页面开发

Author: scarecrowQoQ

src/main.ts

@@ -11,6 +11,7 @@ import * as components from 'vuetify/components'
 import * as directives from 'vuetify/directives'
 import '@mdi/font/css/materialdesignicons.css'
 import { aliases, mdi } from 'vuetify/iconsets/mdi'
+
 const vuetify = createVuetify({
     components,
     directives,

src/views/intro/index.vue

@@ -15,7 +15,7 @@ const handleScroll = (event: WheelEvent) => {
   isAnimating = true
 
   const scrollDirection = event.deltaY > 0 ? 1 : -1
-  let steps = 4 // 每次滚动切换六张图片
+  let steps = 5 // 每次滚动切换六张图片
 
   const switchImages = () => {
     const newIndex = currentImageIndex.value + scrollDirection
@@ -32,7 +32,7 @@ const handleScroll = (event: WheelEvent) => {
       } else {
         isAnimating = false
       }
-    }, 5) // 每次切换间隔10毫秒
+    }, 1) // 每次切换间隔10毫秒
   }
 
   switchImages()
@@ -57,7 +57,6 @@ const handleVideoEnded = () => {
 onMounted(() => {
   preloadImages()
   window.addEventListener('wheel', handleScroll, { passive: false })
-
   const videoElement = document.querySelector('.intro-video') as HTMLVideoElement
   if (videoElement) {
     setTimeout(() => {
@@ -76,38 +75,57 @@ onUnmounted(() => {
 })
 const titleSlidUpClass = ref("")
 const titleSlidUp = (isIntersecting: boolean, entries: IntersectionObserverEntry[], observer: IntersectionObserver) => {
-  if (isIntersecting) {
-    titleSlidUpClass.value = "slid-up"
-  }
-  else {
-    titleSlidUpClass.value = ""
-  }
+  entries.forEach(entry => {
+    const element = entry.target as HTMLElement
+    if (isIntersecting) {
+      element.classList.add("slid-up")
+      element.classList.remove("unvisibility")
+    }
+    else {
+      element.classList.add("unvisibility")
+      element.classList.remove("slid-up")
+    }
+  })
 }
 
-const feature = {
-
+interface feature{
+  name: string
+  desc: string
+  img: string
 }
 
+const features = reactive<feature[]>([
+  {name: "牛逼", desc: "除了牛逼还是牛逼", img: "/src/assets/img/intro/feature1.jpg"},
+  {name: "牛逼啊", desc: "除了牛逼啊还是牛逼啊", img: "/src/assets/img/intro/feature2.jpg"},
+  {name: "真的牛逼啊", desc: "除了真的的牛逼啊还是真的牛逼啊", img: "/src/assets/img/intro/feature3.jpg"}
+])
+
 </script>
 
 <template>
-  <div class="image-container">
+  <div class="image-container"  >
     <video src="/src/assets/img/intro/intro.mp4" class="intro-video" :style="fadeOutVideo" muted></video>
-    <img v-for="(image, index) in images" :src="image" :key="index" class="image-slide" :class="{ active: index === currentImageIndex && !isVideoPlaying }" alt="Slideshow Image" />
+    <img v-for="(image, index) in images" :src="image" :key="index" class="image-slide" :style=" index === currentImageIndex && !isVideoPlaying ? {visibility: 'visible',opacity : 1} : ''"  alt="Slideshow Image" />
   </div>
 
-  <div class="project-slogan" v-intersect="titleSlidUp" >
-    <p style="font-size: 50px; margin-bottom: 20px" :class="titleSlidUpClass">ONE TOUCHE ONE WORLD</p>
-    <p style="width: 40%; margin: 0 auto; font-weight: lighter; animation-duration: 2s; " :class="titleSlidUpClass"> $1.0 billion in capital raised by some of the most prominent investors, Clear Street services hundreds of institutional clients and supports ~$60 billion in customer balances.</p>
-  </div>
+  <div class="blue-section">
+    <div class="project-slogan unvisibility" v-intersect="titleSlidUp" >
+      <p style="font-size: 50px; margin-bottom: 20px" :class="titleSlidUpClass">ONE TOUCHE ONE WORLD</p>
+      <p style="width: 40%; margin: 0 auto; font-weight: lighter; animation-duration: 2s; " :class="titleSlidUpClass"> $1.0 billion in capital raised by some of the most prominent investors, Clear Street services hundreds of institutional clients and supports ~$60 billion in customer balances.</p>
+    </div>
 
-  <div class="diver"></div>
-
-  <div class="features-container">
-      <div class="features-box" v-for="index of 3">
+    <div class="diver"></div>
 
+    <div class="features-container" v-intersect="titleSlidUp" >
+      <div class="features-box" :class="titleSlidUpClass" v-for="(feature, index) in features ">
+        <p style="font-size: 25px">{{feature.name}}</p>
+        <div class="feature-img" :style="{ backgroundImage: `url(${feature.img})` }"> </div>
+        <p>{{feature.desc}}</p>
       </div>
+    </div>
   </div>
+
+
 </template>
 
 <style scoped>
@@ -122,6 +140,10 @@ p, span {
   overflow: hidden;
 }
 
+.unvisibility{
+  visibility: hidden;
+}
+
 .image-slide {
   width: 100%;
   height: 100%;
@@ -131,13 +153,12 @@ p, span {
   object-fit: cover;
   visibility: hidden;
   opacity: 0;
-  transition: opacity 0.2s ease-in-out, visibility 0s 0s;
+  transition: opacity 0s , visibility 0s 0s;
 }
 
 .image-slide.active {
   visibility: visible;
   opacity: 1;
-  transition: opacity 0s ease-in-out, visibility 0s 0s;
 }
 
 .intro-video {
@@ -153,11 +174,15 @@ p, span {
   display: none; /* 隐藏视频 */
 }
 
+.blue-section{
+  background-color: #2e21de;
+}
+
 .project-slogan {
   height: 20vh;
   width: 100%;
   text-align: center;
-  background-color: #2e21de;
+
   transition: opacity 0.5s ease-in-out;
 }
 .project-slogan p {
@@ -174,8 +199,8 @@ p, span {
 .features-container{
   background-color: #2e21de;
   width: 100%;
-  height: 40vh;
-  padding: 0 10vw;
+  height: 70vh;
+  padding: 10vh 10vw;
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -185,6 +210,14 @@ p, span {
   height: 100%;
 }
 
+.features-container .feature-img{
+  margin: 10px 0;
+  background-size: cover;
+  background-position: 50% 50%;
+  height: 80%;
+  width: 100%;
+  border-radius: 20px;
+}
 
 
 @keyframes slideUp {

src/views/market/list.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import marketCard from '@/components/market/MarketCard.vue'
-import type {projectData} from "@/type/market/Market.ts";
+import marketCard from '../../components/market/MarketCard.vue'
+import type {projectData} from "../../type/market/Market.ts";
 import {reactive, ref, computed, watch} from "vue";
 import project from "./project.vue";
 // import {tr} from "vuetify/locale";