feats

index.html

@@ -13,7 +13,7 @@
 
     <!-- <link rel="stylesheet" href="./slidePage/slidePage.min.css"> -->
 
-    <link rel="stylesheet" href="./fonts/SourceHanSansCN-Medium/SourceHanSansCN-Medium.css">
+    <link rel="stylesheet" href="./fonts/SourceHanSerifCN-Medium/SourceHanSerifCN-Medium.css">
     <title>南京-紫金草行动</title>
     <!-- <script src="./vconsole.min.js"></script>
     <script>

public/fonts/SourceHanSerifCN-Medium/SourceHanSerifCN-Medium.css

@@ -0,0 +1,8 @@
+@font-face {
+  font-family: "SourceHanSerifCN-Medium";
+  src: url("SourceHanSerifCN-Medium.ttf") format("truetype"); /* iOS 4.1- */
+  font-style: normal;
+  font-weight: normal;
+}
+
+

src/components/DownArrow.vue

@@ -0,0 +1,30 @@
+<template>
+  <img class="down-arrow" src="/images/down.png" alt="">
+</template>
+
+<script setup>
+
+</script>
+
+<style lang="less" scoped>
+  .down-arrow {
+    width: 15vw;
+    position: absolute;
+    bottom: 5vh;
+    left: calc(50% - 8vw);
+
+    animation: mv-down 2s ease-in-out infinite forwards;
+  }
+
+  @keyframes mv-down {
+    from {
+      transform: translateY(0);
+      opacity: 1;
+    }
+
+    to {
+      transform: translateY(2vh);
+      opacity: 0;
+    }
+  }
+</style>

src/pages/pg1/index.vue

@@ -19,6 +19,8 @@
     <div class="footer abs animate__animated animate__fadeInUp">
       <img src="/images/pg1/bg2.png" alt="" parallax-offset='-200'>
     </div>
+
+    <DownArrow />
     <Md1 v-if="mdActive == 1" @cancel="onCancel(1)" />
     <Md2 v-if="mdActive == 2" @cancel="onCancel(2)" />
     <Md3 v-if="mdActive == 3" @cancel="onCancel(3)" />
@@ -29,6 +31,7 @@
   import { onMounted, ref } from 'vue';
   import { useRouter } from 'vue-router';
   import InkEffect from '@/components/InkEffect.vue';
+  import DownArrow from '@/components/DownArrow.vue';
   import Logo from './Logo.vue';
   import Part1 from './P1.vue';
   import Part2 from './P2.vue';

src/pages/pg2/index.vue

@@ -66,6 +66,8 @@
       了解故事
       <img src="/images/pg2/箭头-右.png" alt />
     </div>
+
+    <DownArrow />
   </div>
 </template>
 
@@ -75,6 +77,7 @@
   import Bell from "@/components/Bell.vue";
   import Animate from "@/components/Animate.vue";
   import InkEffect from "@/components/InkEffect.vue";
+  import DownArrow from '@/components/DownArrow.vue';
   import Cloud from "./Cloud.vue";
   import Smoke from "./smoke.vue";
   import Flower1 from "./flower/Flower1.vue";

src/style.less

@@ -1,5 +1,5 @@
 :root {
-  font-family: "SourceHanSansCN-Medium";
+  font-family: "SourceHanSerifCN-Medium";
   font-size: 16px;
   line-height: 24px;
   font-weight: 400;