feat: 保存

src/App.vue

@@ -36,8 +36,9 @@ const afterLoad = (anchorLink, index) => {
 
 const options = ref({
   licenseKey: "",
-  menu: ".nav",
-  // anchors: ["section1", "page2", "page3"],
+  // menu: ".nav",
+  menu: false,
+  anchors: [],
   controlArrows: true,
   scrollOverflow: false,
   normalScrollElements: ".can-scroll",

src/assets/style/reset.css

@@ -35,7 +35,7 @@
     text-align: justify;
     color: #cfc4ab;
   }
-  body.wapbody {
+  body.isMobile {
     font-family: "simsun";
   }
   
@@ -78,7 +78,7 @@
     font-family: "syst-bold";
   }
   
-  .wapbody b {
+  .isMobile b {
     font-family: "simsun";
   }
   
@@ -89,10 +89,10 @@
     display: none;
   }
   
-  .wapbody .pcshow {
+  .isMobile .pcshow {
     display: none;
   }
-  .wapbody .wapshow {
+  .isMobile .wapshow {
     display: block;
   }
   
@@ -122,7 +122,7 @@
             animation: rotate 3s linear 0s infinite;
   }
   
-  .wapbody .music {
+  .isMobile .music {
     top: 1rem;
     right: --wall-margin-left;
   }
@@ -476,7 +476,7 @@
     margin: 0;
   }
   
-  .wapbody .wwintrobox .wwtitle {
+  .isMobile .wwintrobox .wwtitle {
     width: 100%;
   }
   
@@ -530,10 +530,10 @@
     width: calc(50% - var(--wall-margin-left) - 2vw);
   }
   
-  .wapbody .wwtitle {
+  .isMobile .wwtitle {
     font-family: "simsun";
   }
-  .wapbody .wwtitle2 {
+  .isMobile .wwtitle2 {
     font-family: "simsun";
   }
   
@@ -711,11 +711,11 @@
     animation: 2s linear 0s infinite normal none running PnBGOBaC;
   }
   
-  .wapbody #videocont1-1 {
+  .isMobile #videocont1-1 {
     top: auto;
     bottom: 20vh;
   }
-  .wapbody #videocont1-5 {
+  .isMobile #videocont1-5 {
     top: auto;
     bottom: 10vh;
   }
@@ -772,7 +772,7 @@
     margin-left: 4%;
   }
   
-  .wapbody .yuzun-3 .box img {
+  .isMobile .yuzun-3 .box img {
     width: 90%;
   }
   
@@ -788,7 +788,7 @@
     width: 26vw;
   }
   
-  .wapbody .nav li .title h3 {
+  .isMobile .nav li .title h3 {
     font-family: "simsun";
   }
   
@@ -912,71 +912,71 @@
       --wall-margin-left4: 20vw;
     }
   }
-  .wapbody .wwintrobox1 {
+  .isMobile .wwintrobox1 {
     top: 7vh;
   }
-  .wapbody .wwtitle {
+  .isMobile .wwtitle {
     font-size: 4rem;
   }
-  .wapbody .wwintrobox {
+  .isMobile .wwintrobox {
     width: auto;
     right: var(--wall-margin-left);
   }
-  .wapbody .wwintrobox2 {
+  .isMobile .wwintrobox2 {
     top: 18vh;
     bottom: auto;
   }
-  .wapbody .wwintrobox1 + .wwintrobox2 {
+  .isMobile .wwintrobox1 + .wwintrobox2 {
     top: 25vh;
   }
-  .wapbody .wwintro {
+  .isMobile .wwintro {
     font-size: 1.4rem;
   }
-  .wapbody .wwintro b {
+  .isMobile .wwintro b {
     font-size: 2rem;
   }
-  .wapbody .wwintro1 {
+  .isMobile .wwintro1 {
     font-size: 2rem;
   }
-  .wapbody .wwintro2,
-  .wapbody .wwinfo1 {
+  .isMobile .wwintro2,
+  .isMobile .wwinfo1 {
     font-size: 1.4rem;
   }
-  .wapbody .wwinfobox {
+  .isMobile .wwinfobox {
     bottom: calc(var(--vh, 1vh) * 23);
   }
-  .wapbody .wwinfo {
+  .isMobile .wwinfo {
     font-size: 1.2rem;
     text-align: right;
   }
-  .wapbody .wwfirst > .box .wwbox img {
+  .isMobile .wwfirst > .box .wwbox img {
     position: absolute;
     height: 60%;
     width: 170%;
     left: -35%;
     top: 20%;
   }
-  .wapbody .wwfirst > .box .wwbox-big img {
+  .isMobile .wwfirst > .box .wwbox-big img {
     width: 210%;
     left: -55%;
   }
-  .wapbody .wwsecond .wwbox img {
+  .isMobile .wwsecond .wwbox img {
     height: 46%;
     bottom: 0;
     width: auto;
   }
-  .wapbody .wwsecond .wwbox.wwfullbox img {
+  .isMobile .wwsecond .wwbox.wwfullbox img {
     height: 100%;
     right: -104%;
   }
-  .wapbody .wwintrobox-shadow {
+  .isMobile .wwintrobox-shadow {
     padding: 2rem 2.5rem;
   }
-  .wapbody .wsicon {
+  .isMobile .wsicon {
     left: var(--wall-margin-left);
     bottom: calc(var(--vh, 1vh) * 10);
   }
-  .wapbody .nav {
+  .isMobile .nav {
     left: 1rem;
     top: 0;
     -webkit-transform: none;
@@ -984,29 +984,29 @@
     right: 1rem;
     text-align: center;
   }
-  .wapbody .nav li {
+  .isMobile .nav li {
     margin-right: 10vw;
     margin-bottom: 0;
     display: inline-block;
   }
-  .wapbody .nav li:last-child {
+  .isMobile .nav li:last-child {
     margin-right: 0;
   }
-  .wapbody .nav li:after {
+  .isMobile .nav li:after {
     width: 10vw;
     height: 1px;
     top: 0;
   }
-  .wapbody .nav li .title {
+  .isMobile .nav li .title {
     top: 0;
     padding-left: 0;
     left: 50%;
     -webkit-transform: translateX(-50%);
             transform: translateX(-50%);
   }
-  .wapbody .nav li .title h3 {
+  .isMobile .nav li .title h3 {
     font-size: 1rem;
   }
-  .wapbody .nav li.active .title, .wapbody .nav li:hover .title {
+  .isMobile .nav li.active .title, .isMobile .nav li:hover .title {
     padding-top: 1rem;
   }

src/components/navGuide.vue

@@ -1,22 +1,20 @@
 <template>
   <Teleport to="body">
-    current:
-    {{ current }}
-    <ul class="nav" v-show="true">
-      <li data-menuanchor="section2" class="active" @click="handleSlideTo(1)">
+    <ul class="nav" v-show="current > 0">
+      <li :class="{ active: isActive(1) }" @click="handleSlideTo(1)">
         <i></i>
         <div class="title">
           <h3>首页</h3>
         </div>
       </li>
-      <li data-menuanchor="section3" @click="handleSlideTo(3)">
+      <li :class="{ active: isActive(2) }" @click="handleSlideTo(3)">
         <i></i>
         <div class="title">
           <h3>开篇</h3>
         </div>
       </li>
 
-      <li data-menuanchor="section4" @click="handleSlideTo(4)">
+      <li :class="{ active: isActive(3) }" @click="handleSlideTo(4)">
         <i></i>
         <div class="title">
           <p>第一章</p>
@@ -24,7 +22,7 @@
         </div>
       </li>
 
-      <li data-menuanchor="section14" @click="handleSlideTo(14)">
+      <li :class="{ active: isActive(13) }" @click="handleSlideTo(14)">
         <i></i>
         <div class="title">
           <p>第二章</p>
@@ -32,7 +30,7 @@
         </div>
       </li>
 
-      <li data-menuanchor="section23" @click="handleSlideTo(23)">
+      <li :class="{ active: isActive(22) }" @click="handleSlideTo(23)">
         <i></i>
         <div class="title">
           <p>第三章</p>
@@ -40,7 +38,7 @@
         </div>
       </li>
 
-      <li data-menuanchor="section30" @click="handleSlideTo(30)">
+      <li :class="{ active: isActive(29) }" @click="handleSlideTo(30)">
         <i></i>
         <div class="title">
           <h3>尾篇</h3>
@@ -59,6 +57,9 @@ const props = defineProps({
 defineOptions({
   name: "nav-guide",
 });
+const isActive = computed(() => (i) => {
+  return current.value === i;
+});
 onMounted(() => {
   emitter.on("onLeave", (params) => {
     // console.log("onLeave", params);
@@ -66,7 +67,7 @@ onMounted(() => {
   emitter.on("afterLoad", (params) => {
     const { index: currentIndex } = params.index;
     console.log("afterLoad-currentIndex", currentIndex);
-    // current.value = params.index && params.index.index;
+    current.value = currentIndex;
   });
 });
 onUnmounted(() => {
@@ -76,6 +77,7 @@ onUnmounted(() => {
 
 const handleSlideTo = (index) => {
   if (props.fullpage) {
+    console.log("moveTO", index);
     props.fullpage.api.moveTo(index);
   }
 };
@@ -146,6 +148,8 @@ const handleSlideTo = (index) => {
     &:hover,
     &.active {
       i:after {
+        width: 1rem;
+        height: 1rem;
         background-color: #d09d68;
       }
       .title {
@@ -171,20 +175,23 @@ const handleSlideTo = (index) => {
       top: 0;
       padding-left: 0;
       left: 50%;
+      padding-top: 1rem;
       transform: translateX(-50%);
+      visibility: hidden;
     }
     &::after {
       width: 10vw;
       height: 1px;
       top: 0;
     }
+    i:after {
+      width: 1.2rem;
+      height: 1.2rem;
+    }
+
     &.active {
       .title {
-        padding-top: 1rem;
-        top: 0;
-        padding-left: 0;
-        left: 50%;
-        transform: translateX(-50%);
+        visibility: visible;
         h3 {
           font-size: 1.1rem;
         }

src/pages/section1.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="section section1">
+  <div class="section section1" >
     <div class="logo fadeInUp"></div>
     <div class="title1 fadeInUp">
       <span>玉润中华线上展览</span>

src/pages/section10.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="section section10 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 section11 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  section12 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 section13 wwfirst">
+  <div class="section section13 wwfirst" >
     <div class="box">
           <div class="wwintrobox wwintrobox1">
             <div class="wwtitle">玉神面</div>

src/pages/section14.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="section section14 chapter">
+  <div class="section section14 chapter" >
     <div class="box">
       <div class="chapter-num">第二章</div>
       <div class="chapter-title">玉成中国</div>

src/pages/section15.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="section section15 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 section16 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 section17 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 section18 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 section19 unit">
+  <div class="section section19 unit" >
     <div class="box">
           <div class="unit-num">第二单元</div>
           <div class="unit-title">比德</div>

src/pages/section2.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="section section2" data-anchor="section2">
+  <div class="section section2">
     <ul>
       <li class="fadeInUp">
         <h3>
@@ -20,9 +20,6 @@
 <script setup></script>
 
 <style lang="scss" scoped>
-@import "/src/assets/style/index.css";
-@import "/src/assets/style/reset.css";
-@import "/src/assets/style/section1.css";
 .section {
   position: relative;
 }

src/pages/section20.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="section section20 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 section21 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 section22 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 section23 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 section24 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 section25 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 section26 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 section27 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 section28 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 section29 wwfirst">
+  <div class="section section29 wwfirst" >
     <div class="box">
           <div class="wwintrobox wwintrobox1">
             <div class="wwtitle" style="margin-left: -3rem">“太上皇帝之宝”</div>

src/pages/section3.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="section section3" data-anchor="section3">
+  <div class="section section3" >
     <canvas id="canvas" v-show="isShowCanvas"></canvas>
     <process-bar :process="process" />
     <div

src/pages/section30.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="section section30 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 section31 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 section4 chapter" data-anchor="section4">
+  <div class="section section4 chapter" >
     <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 section5  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 section6 wwfirst">
+  <div class="section section6 wwfirst" >
     <div class="box">
           <div class="wwintrobox wwintrobox1">
             <div class="wwtitle">玦</div>

src/pages/section7.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="section section7 unit">
+  <div class="section section7 unit" >
     <div class="box">
       <div class="unit-num">第二单元</div>
       <div class="unit-title">星辉</div>

src/pages/section8.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="section section8 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 section9 wwfirst">
+  <div class="section section9 wwfirst" >
     <div class="box">
           <div class="wwintrobox wwintrobox1">
             <div class="wwtitle">玉龙</div>

src/style.scss

@@ -11,7 +11,7 @@
   font-style: normal;
 }
 @import "../src/assets/style/animate.css";
-@import "../src/assets/style/reset.css";
+@import "../src/assets/style/reset.scss";
 
 :root {
   font-synthesis: none;