feat: 保存

src/App.vue

@@ -10,7 +10,7 @@ import View from "./view/index.vue";
 import { ref } from "vue";
 const options = ref({
   licenseKey: "",
-  menu: "#menu",
+  menu: ".nav",
   // anchors: ["page1", "page2", "page3"],
   controlArrows: true,
   scrollOverflow: false,

src/components/mouseTips.vue

@@ -0,0 +1,58 @@
+<template>
+  <Teleport to="body">
+    <div class="scroll-icon"></div>
+  </Teleport>
+</template>
+
+<script setup>
+defineOptions({
+  name: "mouse-tips",
+});
+</script>
+<style>
+.scroll-icon {
+  opacity: 1;
+  z-index: 10;
+  position: absolute;
+  bottom: 1em;
+  left: 50%;
+  margin-left: -0.6em;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 2em;
+  width: 1.2em;
+  font-size: 22px;
+  color: rgba(255, 255, 255, 0.5);
+  border-radius: 2em;
+  border: solid 2px;
+  transition: 0.4s;
+  &::before {
+    content: "";
+    display: inline-block;
+    width: 5px;
+    height: 5px;
+    background-color: #fff;
+    border-radius: 50%;
+    animation: scroll-icon 2.2s infinite cubic-bezier(0.75, 0.05, 0.36, 1);
+  }
+}
+
+@keyframes scroll-icon {
+  0% {
+    transform: translateY(-12px);
+    opacity: 0;
+  }
+
+  30%,
+  70% {
+    opacity: 1;
+  }
+  100% {
+    transform: translateY(12px);
+    opacity: 0;
+  }
+}
+</style>

src/components/navGuide.vue

@@ -0,0 +1,124 @@
+<template>
+  <Teleport to="body">
+    <ul class="nav">
+      <li class="active" num="1">
+        <i></i>
+        <div class="title">
+          <h3>首页</h3>
+        </div>
+      </li>
+      <li num="3" class="">
+        <i></i>
+        <div class="title">
+          <h3>开篇</h3>
+        </div>
+      </li>
+
+      <li num="4">
+        <i></i>
+        <div class="title">
+          <p>第一章</p>
+          <h3>玉生华夏</h3>
+        </div>
+      </li>
+
+      <li num="22">
+        <i></i>
+        <div class="title">
+          <p>第二章</p>
+          <h3>玉成中国</h3>
+        </div>
+      </li>
+
+      <li num="42">
+        <i></i>
+        <div class="title">
+          <p>第三章</p>
+          <h3>玉美神州</h3>
+        </div>
+      </li>
+
+      <li num="53">
+        <i></i>
+        <div class="title">
+          <h3>尾篇</h3>
+        </div>
+      </li>
+    </ul>
+  </Teleport>
+</template>
+<script setup>
+defineOptions({
+  name: "nav-guide",
+});
+</script>
+<style lang="scss">
+.nav {
+  position: fixed;
+  left: 1rem;
+  top: 50%;
+  transform: translateY(-50%);
+  display: block;
+  // z-index: 1000;
+  li {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    margin-bottom: 10vh;
+    cursor: pointer;
+    &.active {
+      .title {
+        opacity: 1;
+        visibility: visible;
+        padding-left: 2rem;
+      }
+    }
+    &::after {
+      content: "";
+      position: absolute;
+      width: 1px;
+      top: 0.5rem;
+      height: 13vh;
+      background-color: #7b6f54;
+    }
+    i {
+      position: relative;
+      width: 1.25rem;
+      height: 1.25rem;
+      z-index: 1;
+      cursor: pointer;
+      &::after {
+        content: "";
+        position: absolute;
+        width: 0.75rem;
+        height: 0.75rem;
+        border-radius: 50%;
+        background-color: #423c2e;
+        border: 1px solid #7b6f54;
+        box-sizing: border-box;
+        box-shadow: 0 0 0px 2px #000;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        transition: all 0.6s;
+      }
+    }
+    .title {
+      position: absolute;
+      color: #d09d68;
+      opacity: 0;
+      visibility: hidden;
+      left: 0;
+      padding-left: 1rem;
+      width: 8em;
+      top: 50%;
+      transform: translateY(-50%);
+      transition: all 0.6s;
+      h3 {
+        font-family: "syst-bold";
+        font-size: 1.25rem;
+      }
+    }
+  }
+}
+</style>

src/view/index.vue

@@ -1,21 +1,17 @@
 <template>
+  <mouse-tips />
+  <nav-guide />
   <section1></section1>
   <section2 />
   <section3 />
-  <div class="section fp-noscroll">
-    Section 2
-  </div>
-  <div class="section">
-    Section 3
-  </div>
-  <div class="section">
-    Section 4
-  </div>
-  <div class="section">
-    Section 5
-  </div>
+  <div class="section fp-noscroll">Section 2</div>
+  <div class="section">Section 3</div>
+  <div class="section">Section 4</div>
+  <div class="section">Section 5</div>
 </template>
 <script setup>
+import mouseTips from "../components/mouseTips.vue";
+import navGuide from "../components/navGuide.vue";
 import Section1 from "../pages/section1.vue";
 import Section2 from "../pages/section2.vue";
 import Section3 from "../pages/section3.vue";