Merge branch 'master' of http://192.168.0.115:3000/zhangyupeng/fullpage-show

package.json

@@ -4,7 +4,7 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --host 0.0.0.0",
     "build": "vite build",
     "preview": "vite preview"
   },

src/App.vue

@@ -1,17 +1,28 @@
 <template>
   <full-page ref="fullpage" :options="options" @after-load="afterLoad">
-    <View />
+    <View :fullpage="fullpage" />
   </full-page>
 </template>
 
 <script setup>
 import FullPage from "./components/fullpage/fullpage.vue";
 import View from "./view/index.vue";
-import { ref } from "vue";
+import { onMounted, ref, watchEffect, getCurrentInstance } from "vue";
+
+const instance = getCurrentInstance();
+const fullpage = ref();
+onMounted(() => {
+  watchEffect(() => {
+    if (instance.proxy.$refs.fullpage) {
+      fullpage.value = instance.proxy.$refs.fullpage;
+    }
+  });
+});
+
 const options = ref({
   licenseKey: "",
-  menu: "#menu",
-  // anchors: ["page1", "page2", "page3"],
+  menu: ".nav",
+  // anchors: ["section1", "page2", "page3"],
   controlArrows: true,
   scrollOverflow: false,
   // scrollBar: true,

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,146 @@
+<template>
+  <Teleport to="body">
+    <ul class="nav">
+      <li data-menuanchor="section1" class="active" @click="handleSlideTo(1)">
+        <i></i>
+        <div class="title">
+          <h3>首页</h3>
+        </div>
+      </li>
+      <li data-menuanchor="section3" @click="handleSlideTo(3)">
+        <i></i>
+        <div class="title">
+          <h3>开篇</h3>
+        </div>
+      </li>
+
+      <li @click="handleSlideTo(4)">
+        <i></i>
+        <div class="title">
+          <p>第一章</p>
+          <h3>玉生华夏</h3>
+        </div>
+      </li>
+
+      <li @click="handleSlideTo(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>
+import { computed, onMounted, watch, watchEffect } from "vue";
+const props = defineProps({
+  fullpage: Object,
+});
+const current = computed(() => props.fullpage.api.tActiveSection());
+defineOptions({
+  name: "nav-guide",
+});
+onMounted(() => {
+  watchEffect(() => {
+    if (props.fullpage) {
+      console.log("props.fullpage", props.fullpage);
+    }
+  });
+});
+
+const handleSlideTo = (index) => {
+  if (props.fullpage) {
+    console.log("index", index);
+    props.fullpage.api.moveTo(index);
+  }
+};
+</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;
+
+    &::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;
+      }
+    }
+
+    &:hover,
+    &.active {
+      .title {
+        opacity: 1;
+        visibility: visible;
+        padding-left: 2rem;
+      }
+    }
+  }
+}
+</style>

src/pages/section1.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="section section1">
+  <div class="section section1" data-anchor="section1">
     <div class="logo" />
     <div class="title1">
       <span>南京博物院90周年院庆系列特展</span>

src/view/index.vue

@@ -1,4 +1,6 @@
 <template>
+  <mouse-tips />
+  <nav-guide :fullpage="fullpage" />
   <section1></section1>
   <section2 />
   <section3 />
@@ -22,6 +24,9 @@
   </div>
 </template>
 <script setup>
+import { ref } from "vue";
+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";
@@ -34,4 +39,7 @@ import Section9 from "../pages/section9.vue";
 defineOptions({
   name: "View",
 });
+defineProps({
+  fullpage: Object,
+});
 </script>