feat: 保存

src/App.vue

@@ -7,12 +7,16 @@
 <script setup>
 import FullPage from "./components/fullpage/fullpage.vue";
 import View from "./view/index.vue";
+import { isMobile } from "./utils/isMoblie.js";
 import { onMounted, ref, watchEffect, getCurrentInstance } from "vue";
 import { emitter } from "./emitter.js";
 
 const instance = getCurrentInstance();
 const fullpage = ref();
 onMounted(() => {
+  if (isMobile()) {
+    document.body.className = "isMobile";
+  }
   watchEffect(() => {
     if (instance.proxy.$refs.fullpage) {
       fullpage.value = instance.proxy.$refs.fullpage;

src/assets/style/reset.css

@@ -29,18 +29,6 @@
     font-weight: normal;
   }
   
-  @font-face {
-    font-family: "syst-regular";
-    src: url("../font/syst-regular.ttf");
-    font-weight: normal;
-    font-style: normal;
-  }
-  @font-face {
-    font-family: "syst-bold";
-    src: url("../font/syst-bold.ttf");
-    font-weight: normal;
-    font-style: normal;
-  }
   body {
     font-family: "syst-regular";
     background-color: #000000;

src/components/navGuide.vue

@@ -1,6 +1,8 @@
 <template>
   <Teleport to="body">
-    <ul class="nav " v-show="current != 0">
+    current:
+    {{ current }}
+    <ul class="nav" v-show="true">
       <li data-menuanchor="section2" class="active" @click="handleSlideTo(1)">
         <i></i>
         <div class="title">
@@ -14,7 +16,7 @@
         </div>
       </li>
 
-      <li @click="handleSlideTo(4)">
+      <li data-menuanchor="section4" @click="handleSlideTo(4)">
         <i></i>
         <div class="title">
           <p>第一章</p>
@@ -22,7 +24,7 @@
         </div>
       </li>
 
-      <li @click="handleSlideTo(14)">
+      <li data-menuanchor="section14" @click="handleSlideTo(14)">
         <i></i>
         <div class="title">
           <p>第二章</p>
@@ -30,7 +32,7 @@
         </div>
       </li>
 
-      <li @click="handleSlideTo(23)">
+      <li data-menuanchor="section23" @click="handleSlideTo(23)">
         <i></i>
         <div class="title">
           <p>第三章</p>
@@ -38,7 +40,7 @@
         </div>
       </li>
 
-      <li @click="handleSlideTo(30)">
+      <li data-menuanchor="section30" @click="handleSlideTo(30)">
         <i></i>
         <div class="title">
           <h3>尾篇</h3>
@@ -48,9 +50,9 @@
   </Teleport>
 </template>
 <script setup>
-import { computed,ref, onMounted, onUnmounted, watch, watchEffect } from "vue";
+import { computed, ref, onMounted, onUnmounted, watch, watchEffect } from "vue";
 import { emitter } from "../emitter.js";
-const current =ref(0)
+const current = ref(0);
 const props = defineProps({
   fullpage: Object,
 });
@@ -59,10 +61,12 @@ defineOptions({
 });
 onMounted(() => {
   emitter.on("onLeave", (params) => {
-    console.log("onLeave", params);
+    // console.log("onLeave", params);
   });
   emitter.on("afterLoad", (params) => {
-    current.value = params.index && params.index.index
+    const { index: currentIndex } = params.index;
+    console.log("afterLoad-currentIndex", currentIndex);
+    // current.value = params.index && params.index.index;
   });
 });
 onUnmounted(() => {
@@ -141,6 +145,9 @@ const handleSlideTo = (index) => {
 
     &:hover,
     &.active {
+      i:after {
+        background-color: #d09d68;
+      }
       .title {
         opacity: 1;
         visibility: visible;
@@ -149,4 +156,46 @@ const handleSlideTo = (index) => {
     }
   }
 }
+.isMobile .nav {
+  top: 0.6rem;
+
+  transform: none;
+  right: 1rem;
+  text-align: center;
+  li {
+    margin-right: 10vw;
+    margin-bottom: 0;
+    display: inline-block;
+    -webkit-box-pack: center;
+    .title {
+      top: 0;
+      padding-left: 0;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+    &::after {
+      width: 10vw;
+      height: 1px;
+      top: 0;
+    }
+    &.active {
+      .title {
+        padding-top: 1rem;
+        top: 0;
+        padding-left: 0;
+        left: 50%;
+        transform: translateX(-50%);
+        h3 {
+          font-size: 1.1rem;
+        }
+      }
+      i {
+        &::after {
+          width: 1.5rem;
+          height: 1.5rem;
+        }
+      }
+    }
+  }
+}
 </style>

src/pages/section10.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="section wwfirst">
+  <div class="section section10 wwfirst">
     <div class="box">
           <div class="wwintrobox wwintrobox1">
             <div class="wwtitle">玉猪龙</div>

src/pages/section11.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="section wwfirst">
+  <div class="section section11 wwfirst">
     <div class="box">
           <div class="wwintrobox wwintrobox1">
             <div class="wwtitle">刻符璧</div>

src/pages/section12.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="section wwfirst">
+  <div class="section  section12 wwfirst">
     <div class="box">
           <div class="wwintrobox wwintrobox1">
             <div class="wwtitle">刻符复式节琮</div>

src/pages/section13.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="section wwfirst">
+  <div class="section section13 wwfirst">
     <div class="box">
           <div class="wwintrobox wwintrobox1">
             <div class="wwtitle">玉神面</div>

src/pages/section14.vue

@@ -1,17 +1,17 @@
 <template>
-  <div class="section chapter">
+  <div class="section section14 chapter">
     <div class="box">
-          <div class="chapter-num">第二章</div>
-          <div class="chapter-title">玉成中国</div>
-          <div class="chapter-intro">
-            <p>
-              在历史的洪流中，用玉加速了中华文明融合、聚变直至统一。玉礼器成为“最早的中国”形成过程中，不可或缺的政治信物。
-            </p>
-            <p>
-              夏文明崛起时，玉礼器是早期中国形成的重要标志。商与西周，玉礼制一脉相承，奠定了华夏礼仪的基石。东周至秦汉，个体的理性思维开始觉醒，玉器，逐步塑造、确立起中华民族独特的气质涵养与精神品格。
-            </p>
-          </div>
-        </div>
+      <div class="chapter-num">第二章</div>
+      <div class="chapter-title">玉成中国</div>
+      <div class="chapter-intro">
+        <p>
+          在历史的洪流中，用玉加速了中华文明融合、聚变直至统一。玉礼器成为“最早的中国”形成过程中，不可或缺的政治信物。
+        </p>
+        <p>
+          夏文明崛起时，玉礼器是早期中国形成的重要标志。商与西周，玉礼制一脉相承，奠定了华夏礼仪的基石。东周至秦汉，个体的理性思维开始觉醒，玉器，逐步塑造、确立起中华民族独特的气质涵养与精神品格。
+        </p>
+      </div>
+    </div>
   </div>
 </template>
 

src/pages/section15.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="section unit">
+  <div class="section section15 unit">
     <div class="box">
           <div class="unit-num">第一单元</div>
           <div class="unit-title">呈礼</div>

src/pages/section16.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="section wwfirst">
+  <div class="section section16 wwfirst">
     <div class="box">
           <div class="wwintrobox wwintrobox1">
             <div class="wwtitle">牙璋</div>

src/pages/section17.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="section wwfirst">
+  <div class="section section17 wwfirst">
     <div class="box">
           <div class="wwintrobox wwintrobox1">
             <div class="wwtitle">玉戈</div>

src/pages/section18.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="section wwfirst">
+  <div class="section section18 wwfirst">
     <div class="box">
           <div class="wwintrobox wwintrobox1">
             <div class="wwtitle">五璜联佩</div>

src/pages/section19.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="section unit">
+  <div class="section section19 unit">
     <div class="box">
           <div class="unit-num">第二单元</div>
           <div class="unit-title">比德</div>

src/pages/section20.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="section wwfirst">
+  <div class="section section20 wwfirst">
     <div class="box">
           <div class="wwintrobox wwintrobox1">
             <div class="wwtitle short">玉组佩</div>

src/pages/section21.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="section wwfirst">
+  <div class="section section21 wwfirst">
     <div class="box">
           <div class="wwintrobox wwintrobox1">
             <div class="wwtitle">透雕仙人玉叠胜</div>

src/pages/section22.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="section wwfirst">
+  <div class="section section22 wwfirst">
     <div class="box">
           <div class="wwintrobox wwintrobox1">
             <div class="wwtitle">玉樽</div>

src/pages/section23.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="section chapter">
+  <div class="section section23 chapter">
     <div class="box">
           <div class="chapter-num">第三章</div>
           <div class="chapter-title">玉美神州</div>

src/pages/section24.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="section unit">
+  <div class="section section24 unit">
     <div class="box">
           <div class="unit-num">第一单元</div>
           <div class="unit-title">琼华</div>

src/pages/section25.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="section wwfirst">
+  <div class="section section25 wwfirst">
     <div class="box">
           <div class="wwintrobox wwintrobox1">
             <div class="wwtitle">玉梁金宝钿带</div>

src/pages/section26.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="section wwfirst">
+  <div class="section section26 wwfirst">
     <div class="box">
           <div class="wwintrobox wwintrobox1">
             <div class="wwtitle">玉梁金宝钿带</div>

src/pages/section27.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="section wwfirst">
+  <div class="section section27 wwfirst">
     <div class="box">
           <div class="wwintrobox wwintrobox1">
             <div class="wwtitle">春水图玉绦环钩</div>

src/pages/section28.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="section wwfirst">
+  <div class="section section28 wwfirst">
     <div class="box">
           <div class="wwintrobox wwintrobox1">
             <div class="wwtitle">嵌宝玉兔耳环</div>

src/pages/section29.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="section wwfirst">
+  <div class="section section29 wwfirst">
     <div class="box">
           <div class="wwintrobox wwintrobox1">
             <div class="wwtitle" style="margin-left: -3rem">“太上皇帝之宝”</div>

src/pages/section30.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="section chapter">
+  <div class="section section30 chapter">
     <div class="box">
           <div class="chapter-title">尾篇</div>
           <div class="chapter-intro">

src/pages/section31.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="section section-erweima">
+  <div class="section section31 section-erweima">
     <div class="box">
           <div class="logo"></div>
           <ul class="ewmlist">

src/pages/section4.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="section chapter" data-anchor="section4">
+  <div class="section section4 chapter" data-anchor="section4">
     <div class="box">
       <div class="chapter-num">第一章</div>
       <div class="chapter-title">玉生华夏</div>

src/pages/section5.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="section unit">
+  <div class="section section5  unit">
     <div class="box">
           <div class="unit-num">第一单元</div>
           <div class="unit-title">万年</div>

src/pages/section6.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="section wwfirst">
+  <div class="section section6 wwfirst">
     <div class="box">
           <div class="wwintrobox wwintrobox1">
             <div class="wwtitle">玦</div>

src/pages/section7.vue

@@ -1,17 +1,17 @@
 <template>
-  <div class="section unit">
+  <div class="section section7 unit">
     <div class="box">
-          <div class="unit-num">第二单元</div>
-          <div class="unit-title">星辉</div>
-          <div class="unit-intro">
-            <p>
-              距今七千至四千年前的华夏大地上，史前社会正向着统一的“中华文明共同体”大步迈进。开采玉料、制作美玉、寄托信仰，玉器凝结着这个“文明体”的精神共识。
-            </p>
-            <p>
-              《禹贡》记载，美玉遍布华夏大地。此时用玉文化如满天星斗般异彩纷呈。“最早的中国”诞生之初，玉，得到了最纯正、最普世的认同。
-            </p>
-          </div>
-        </div>
+      <div class="unit-num">第二单元</div>
+      <div class="unit-title">星辉</div>
+      <div class="unit-intro">
+        <p>
+          距今七千至四千年前的华夏大地上，史前社会正向着统一的“中华文明共同体”大步迈进。开采玉料、制作美玉、寄托信仰，玉器凝结着这个“文明体”的精神共识。
+        </p>
+        <p>
+          《禹贡》记载，美玉遍布华夏大地。此时用玉文化如满天星斗般异彩纷呈。“最早的中国”诞生之初，玉，得到了最纯正、最普世的认同。
+        </p>
+      </div>
+    </div>
   </div>
 </template>
 

src/pages/section8.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="section wwfirst">
+  <div class="section section8 wwfirst">
     <div class="box">
       <div class="wwintrobox wwintrobox1">
         <div class="wwtitle">玉人</div>

src/pages/section9.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="section wwfirst">
+  <div class="section section9 wwfirst">
     <div class="box">
           <div class="wwintrobox wwintrobox1">
             <div class="wwtitle">玉龙</div>

src/style.scss

@@ -1,5 +1,18 @@
+@font-face {
+  font-family: "syst-regular";
+  src: url("assets/syst-regular.ttf");
+  font-weight: normal;
+  font-style: normal;
+}
+@font-face {
+  font-family: "syst-bold";
+  src: url("assets/syst-bold.ttf");
+  font-weight: normal;
+  font-style: normal;
+}
 @import "../src/assets/style/animate.css";
 @import "../src/assets/style/reset.css";
+
 :root {
   font-synthesis: none;
   text-rendering: optimizeLegibility;