fix

src/pages/pg2/index.vue

@@ -1,13 +1,54 @@
 <template>
   <div class="page pg-bg pg2" parallax ref="pgRef">
-    <Cloud class="cloud abs" />
-    <div class="content txt">
-      <Animate comp="p" name="animate__lightSpeedInRight" delay="100ms" :ready="show">
-        1939年
-        <br />
-        <strong>一抹紫色</strong>在战争的废墟中……
-      </Animate>
-      <Animate
+    <div class="bg">
+      <div>
+        <!-- <img src="/images/pg2/content-bg.png" parallax-offset='200' alt="" /> -->
+        <Animate
+          comp="img"
+          name="animate__fadeInLeft"
+          src="/images/pg2/content-bg.png"
+          :ready="show"
+        />
+      </div>
+    </div>
+    <!-- <Cloud class="cloud abs" /> -->
+    <div class="content">
+      <div>
+        <Animate
+          class="year"
+          comp="img"
+          name="animate__fadeIn"
+          src="/images/pg2/1939年.png"
+          delay="1000ms"
+          :ready="show"
+        />
+        <!-- <img class="year" src="/images/pg2/1939年.png" alt="" /> -->
+      </div>
+      <!-- 1939年 -->
+      <div>
+        <!-- <img class="text1" src="/images/pg2/text1.png" alt="" /> -->
+        <Animate
+          class="text1"
+          comp="img"
+          name="animate__fadeInUp"
+          src="/images/pg2/text1.png"
+          delay="2000ms"
+          :ready="show"
+        />
+      </div>
+      <div>
+        <Animate
+          class="text2"
+          comp="img"
+          name="animate__fadeIn"
+          src="/images/pg2/text2.png"
+          delay="3000ms"
+          :ready="show"
+        />
+        <!-- <img class="text2" src="/images/pg2/text2.png" alt="" /> -->
+      </div>
+      <!-- </Animate> -->
+      <!-- <Animate
         @click="onClick"
         class="story"
         comp="img"
@@ -16,81 +57,101 @@
         src="./images/pg2/story.png"
         alt
         :ready="show"
-      />
-    </div>
-
-    <div class="hill abs">
-      <img class src="/images/pg2/mountain.png" alt parallax-offset="-100" />
+      /> -->
     </div>
 
     <div class="groups abs">
       <div>
-        <img class="stele" src="/images/pg2/stele.png" alt parallax-offset="-150" />
-        <div parallax-offset="-300">
-          <img class="ruins" src="/images/pg2/ruins.png" alt />
-          <!-- <Smoke class="smoke abs" /> -->
+        <div>
+          <img class="ruins" src="/images/pg2/废墟.png" alt />
         </div>
-        <img class="persons" src="/images/pg2/persons.png" alt parallax-offset="-500" />
+      </div>
+    </div>
+    <div class="flower1">
+      <div>
+        <img src="/images/pg2/flower1.png" alt="" />
+      </div>
+    </div>
+
+    <div class="flower2">
+      <div>
+        <img src="/images/pg2/flower2.png" alt="" />
       </div>
     </div>
 
-    <img class="footer abs" src="/images/pg2/footer.png" alt />
+    <div class="footer txt">
+      了解故事
+      <img src="/images/pg2/箭头-右.png" alt />
+    </div>
+    <!-- <img class="footer abs" src="/images/pg2/footer.png" alt /> -->
 
-    <div class="flower abs">
+    <!-- <div class="flower abs">
       <Animate class="flower1 abs" :comp="Flower1" :name="flowerAnimate.left" :ready="show" />
       <Animate class="flower2 abs" :comp="Flower2" :name="flowerAnimate.right" :ready="show" />
       <Animate class="flower3 abs" :comp="Flower3" :name="flowerAnimate.left" :ready="show" />
-    </div>
+    </div> -->
   </div>
 </template>
 
 <script setup>
-import { reactive, ref } from 'vue'
-import { useRouter } from 'vue-router'
-import Bell from '@/components/Bell.vue'
-import Animate from '@/components/Animate.vue'
-import Cloud from './Cloud.vue'
-import Smoke from './smoke.vue'
-import Flower1 from './flower/Flower1.vue'
-import Flower2 from './flower/Flower2.vue'
-import Flower3 from './flower/Flower3.vue'
-import usePageShow from '../usePageShow'
-
-const router = useRouter()
+import { reactive, ref } from "vue";
+import { useRouter } from "vue-router";
+import Bell from "@/components/Bell.vue";
+import Animate from "@/components/Animate.vue";
+import Cloud from "./Cloud.vue";
+import Smoke from "./smoke.vue";
+import Flower1 from "./flower/Flower1.vue";
+import Flower2 from "./flower/Flower2.vue";
+import Flower3 from "./flower/Flower3.vue";
+import usePageShow from "../usePageShow";
+
+const router = useRouter();
 
 const onClick = () => {
-  router.push(`/pg2-2`)
-}
+  router.push(`/pg2-2`);
+};
 
 const flowerAnimate = reactive({
-  left: '',
-  right: ''
-})
+  left: "",
+  right: "",
+});
 
-let lastRatio = 0
+let lastRatio = 0;
 const flowShow = ({ intersectionRatio }) => {
-  console.log(intersectionRatio)
-  const isIn = intersectionRatio > 0.5 && intersectionRatio > lastRatio
-  const isOut = intersectionRatio < 0.9 && intersectionRatio < lastRatio
+  console.log(intersectionRatio);
+  const isIn = intersectionRatio > 0.5 && intersectionRatio > lastRatio;
+  const isOut = intersectionRatio < 0.9 && intersectionRatio < lastRatio;
 
   if (isIn) {
-    flowerAnimate.left = 'animate__fadeInLeft'
-    flowerAnimate.right = 'animate__fadeInRight'
+    flowerAnimate.left = "animate__fadeInLeft";
+    flowerAnimate.right = "animate__fadeInRight";
   }
   if (isOut) {
-    flowerAnimate.left = 'animate__fadeOutLeft'
-    flowerAnimate.right = 'animate__fadeOutRight'
+    flowerAnimate.left = "animate__fadeOutLeft";
+    flowerAnimate.right = "animate__fadeOutRight";
   }
 
-  lastRatio = intersectionRatio
-}
+  lastRatio = intersectionRatio;
+};
 
-const [pgRef, show] = usePageShow(flowShow)
+const [pgRef, show] = usePageShow(flowShow);
 </script>
 
 <style lang="less" scoped>
 .pg2 {
   overflow: hidden;
+  // margin-top: -80px;
+  .bg {
+    position: absolute;
+    z-index: 0;
+    width: 50%;
+    // height: 100%;
+    left: 0;
+    top: 0;
+    & > div {
+      position: relative;
+    }
+  }
 
   .bell {
     top: 30px;
@@ -111,10 +172,23 @@ const [pgRef, show] = usePageShow(flowShow)
   .content {
     z-index: 10;
     width: 80vw;
-    margin-left: 20vw;
+    margin-left: 15vw;
     padding-top: 80px;
     line-height: 2em;
 
+    .year {
+      margin-top: 40px;
+      width: 60%;
+    }
+
+    .text1 {
+      margin-top: 30px;
+      width: 30%;
+    }
+    .text2 {
+      margin-top: 30px;
+      width: 60%;
+    }
     .story {
       margin-top: 12px;
       width: 45%;
@@ -144,62 +218,49 @@ const [pgRef, show] = usePageShow(flowShow)
       position: relative;
     }
 
-    .smoke {
-      bottom: 0;
-      left: 55%;
-      z-index: 0;
-      width: 100%;
-      background: transparent;
-    }
-
-    .stele {
-      position: absolute;
-      width: 40%;
-      right: 0;
-      top: -60%;
+    img {
+      filter: gray;
     }
   }
-
-  .footer {
-    left: 0;
-    bottom: 0;
-  }
-
-  .flower {
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    height: 50vh;
-    z-index: 4;
-    overflow: hidden;
-  }
-
   .flower1 {
-    left: 0;
-    bottom: 0;
+    position: absolute;
+    z-index: 20;
+    width: 50%;
+    // height: 100%;
+    left: 50px;
+    top: 500px;
+    & > div {
+      position: relative;
+    }
+    img {
+      width: 50px;
+    }
   }
-
   .flower2 {
-    width: 20vw;
+    position: absolute;
+    z-index: 20;
+
+    // height: 100%;
     right: 0;
-    bottom: 0;
+    top: 250px;
+    img {
+      width: 80px;
+    }
   }
-
-  .flower3 {
-    width: 20vw;
-    left: 20vw;
+  .footer {
+    left: 0;
     bottom: 0;
-  }
-
-  .hill,
-  .wall,
-  .flower {
+    position: absolute;
+    width: 100%;
+    text-align: center;
+    font-size: 24px;
     img {
-      width: 100%;
-      display: block;
-      position: relative;
-      z-index: 100;
+      width: 15px;
+      height: 25px;
+      display: inline;
+      width: auto;
+      vertical-align: text-bottom;
     }
   }
 }
-</style>
+</style>

src/pages/pg4/plant.vue

@@ -0,0 +1,40 @@
+<template>
+    <div class="page pg-bg pg4">
+     
+    </div>
+  </template>
+  
+  <script setup>
+    import { onMounted, ref, watch } from 'vue';
+    import { useRouter } from 'vue-router';
+    import Rule from './Rule.vue';
+    import Map from './Map.vue';
+    import Flower from './Flower.vue';
+    import Share from './Share.vue';
+    import Badge from './Badge.vue';
+  
+    const router = useRouter();
+    const countryRef = ref();
+    const flowerShow = ref();
+    const planted = ref(false);
+    const badgeShow = ref(false);
+  
+    const onMapClick = (country) => {
+      countryRef.value = country;
+      flowerShow.value = true;
+    }
+  
+    const onPlanted = () => {
+      planted.value = true;
+      flowerShow.value = false;
+    }
+  
+    const onShare = () => {
+      router.push('/share')
+    }
+  
+  </script>
+  
+  <style lang="less">
+
+  </style>

src/pages/pg4/video.vue

@@ -1,69 +1,77 @@
 <template>
   <div class="page pg-bg video-pg">
-    <video
-      webkit-playsinline
-      playsinline
-      src="/video/和平宣言-视频-压缩.mp4"
-      preload="preload"
-      controls="controls"
-      ref="mediaRef"
-      @ended="show = true"
-    ></video>
-    <div class="play-action animate__animated animate__fadeIn" v-if="show">
-      <div class="btns">
-        <Btn front-color="#000" back-color="rgba(255,255,255, 1)" @click="onReplay">重播</Btn>
-        <Btn front-color="#000" back-color="rgba(255,255,255, 1)" style="margin-left: 24px" @click="onNext">下一步</Btn>
+    <div class="content">
+      <video
+        webkit-playsinline
+        playsinline
+        src="/video/和平宣言-视频-压缩.mp4"
+        preload="preload"
+        controls="controls"
+        ref="mediaRef"
+        @ended="show = true"
+      ></video>
+      <div class="play-action animate__animated animate__fadeIn" v-if="show">
+        <img src="/images/pg4/重播.png" @click="onReplay" alt="" />
+        <img src="/images/pg4/播撒种子.png" @click="onNext" alt="" />
       </div>
     </div>
   </div>
 </template>
 
 <script setup>
-  import { ref } from 'vue';
-  import { useRouter } from 'vue-router';
-  import Btn from '@/components/Btn.vue';
-  
-  const router = useRouter();
-  const mediaRef = ref();
-  const show = ref(false);
+import { ref } from "vue";
+import { useRouter } from "vue-router";
 
-  const onReplay = () => {
-    mediaRef.value.play();
-    show.value = false;
-  }
+const router = useRouter();
+const mediaRef = ref();
+const show = ref(false);
 
-  const onNext = () => {
-    router.push('/pg4/next')
-  }
+const onReplay = () => {
+  mediaRef.value.play();
+  show.value = false;
+};
+
+const onNext = () => {
+  router.push("/pg4/next");
+};
 </script>
 
 <style lang="less" scoped>
 .video-pg {
   position: relative;
-
-  video {
+  background-image: url("/images/pg4/beijing.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  display: flex;
+  align-items: center;
+  .content {
     position: relative;
-    width: 100%;
-    height: 100%;
-    z-index: 1;
-  }
-
-  .play-action {
-    position: absolute;
-    z-index: 2;
-    top: 0;
-
-    width: 100%;
-    height: 100%;
-    background: rgba(0, 0, 0, 0.5);
-
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    .btns {
+    video {
+      width: 100%;
+      z-index: 1;
+    }
+    .play-action {
+      position: absolute;
+      z-index: 2;
+      bottom: -80px;
+      width: 100%;
+      height: 80px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
 
+      img {
+        width: 100px;
+        width: 30vw;
+        height: 10vw;
+      }
+      img:first-child {
+        margin-right: 20px;
+      }
+      img:last-child {
+        margin-left: 20px;
+      }
     }
   }
 }
-</style>
+</style>