feat: 保存

src/assets/style/index.scss

@@ -242,7 +242,7 @@ body {
 }
 
 .unit {
-  background-image: url(#/img/chapterunit/unit-bg.webp);
+  background-image: url(/img/chapterunit/unit-bg.webp);
 }
 .unit .box {
   padding-top: 15vh;

src/assets/style/reset.scss

@@ -96,9 +96,11 @@ b {
   display: block;
 }
 
-section {
-  height: 100vh;
-  background: no-repeat center/cover;
+.section {
+  position: relative;
+  display: flex;
+  box-sizing: border-box;
+  justify-content: flex-start;
 }
 
 .music {

src/assets/style/section2.css

@@ -0,0 +1,205 @@
+.section2 {
+  background: url(../img/webp/section2/bg.webp) no-repeat center/cover;
+  line-height: 2;
+  color: #997946;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+.section2 ul li {
+  position: relative;
+  opacity: 0;
+}
+.section2 ul li h3,
+.section2 ul li p {
+  font-size: 1.5rem;
+  padding: 0 var(--wall-margin-left3);
+}
+.section2 ul li h3 {
+  padding-top: 5.875rem;
+}
+.section2 ul li p {
+  text-align: right;
+  padding-bottom: 5.875rem;
+}
+.section2 ul li:first-child:after {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 2px;
+  bottom: 0;
+  left: 0;
+  background: url(../img/webp/section2/line.webp) no-repeat center/contain;
+}
+.section2.down ul li {
+  opacity: 1;
+  -webkit-animation: down-upout 1s ease-out 0.1s forwards;
+  animation: down-upout 1s ease-out 0.1s forwards;
+}
+.section2.down ul li + li {
+  -webkit-animation-delay: 0.3s;
+  animation-delay: 0.3s;
+}
+.section2.active ul li {
+  opacity: 0;
+  -webkit-animation: activedown-upin 1s ease-out 0.3s forwards;
+  animation: activedown-upin 1s ease-out 0.3s forwards;
+}
+.section2.active ul li + li {
+  -webkit-animation-delay: 0.5s;
+  animation-delay: 0.5s;
+}
+.section2.active.up ul li {
+  opacity: 0;
+  -webkit-animation: activeup-downin 1s ease-out 0.3s forwards;
+  animation: activeup-downin 1s ease-out 0.3s forwards;
+}
+.section2.active.up ul li + li {
+  -webkit-animation-delay: 0.5s;
+  animation-delay: 0.5s;
+}
+.section2.up ul li {
+  opacity: 1;
+  -webkit-animation: up-downout 1s ease-out 0.3s forwards;
+  animation: up-downout 1s ease-out 0.3s forwards;
+}
+.section2.up ul li + li {
+  -webkit-animation-delay: 0.5s;
+  animation-delay: 0.5s;
+}
+
+.tips-mobile {
+  display: none;
+  position: absolute;
+  z-index: 10;
+  bottom: 0;
+  left: 50%;
+  margin-left: -1rem;
+  width: 5rem;
+}
+.tips-mobile .img {
+  width: 100%;
+}
+
+.wapbody .tips-mobile {
+  display: block;
+}
+
+.scroll-icon {
+  opacity: 0;
+  z-index: 10;
+  position: absolute;
+  bottom: 1em;
+  left: 50%;
+  margin-left: -0.6em;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-box-align: center;
+  -ms-flex-align: 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;
+  -webkit-transition: 0.4s;
+  transition: 0.4s;
+}
+
+.scroll-icon:hover {
+  background-color: rgba(255, 255, 255, 0.05);
+  color: #fff;
+}
+
+.scroll-icon::after {
+  content: "";
+  display: inline-block;
+  width: 5px;
+  height: 5px;
+  background-color: #fff;
+  border-radius: 50%;
+  -webkit-animation: scroll-icon 2.2s infinite cubic-bezier(0.65, 0.05, 0.36, 1);
+  animation: scroll-icon 2.2s infinite cubic-bezier(0.65, 0.05, 0.36, 1);
+}
+
+.pcbody .scroll-icon {
+  opacity: 1;
+}
+
+@-webkit-keyframes scroll-icon {
+  0% {
+    -webkit-transform: translateY(-12px);
+    transform: translateY(-12px);
+    opacity: 0;
+  }
+  30%,
+  70% {
+    opacity: 1;
+  }
+  100% {
+    -webkit-transform: translateY(12px);
+    transform: translateY(12px);
+    opacity: 0;
+  }
+}
+@keyframes scroll-icon {
+  0% {
+    -webkit-transform: translateY(-12px);
+    transform: translateY(-12px);
+    opacity: 0;
+  }
+  30%,
+  70% {
+    opacity: 1;
+  }
+  100% {
+    -webkit-transform: translateY(12px);
+    transform: translateY(12px);
+    opacity: 0;
+  }
+}
+.video_demo {
+  position: absolute;
+  z-index: 10;
+  top: 0;
+  left: 0;
+  width: 100%;
+}
+
+.video_canvas {
+  width: 100%;
+  height: 100%;
+}
+
+.wapbody .section1 .section1-wwbox {
+  height: 61vh;
+  margin: 4vh 7vw -6vh;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: end;
+  -ms-flex-align: end;
+  align-items: flex-end;
+}
+.wapbody .section1 .logo {
+  margin-top: -8vh;
+}
+.wapbody .section1 .title1 {
+  font-size: 1.2rem;
+}
+.wapbody .section1 .title2 {
+  background-position: top;
+  background-size: 80% auto;
+  background-image: url(../img/webp/wap/section1/section1-title.webp);
+}

src/components/mouseTips.vue

@@ -1,13 +1,21 @@
 <template>
   <Teleport to="body">
-    <div class="scroll-icon"></div>
+    <div class="scroll-icon" v-if="!mobile"></div>
+    <div class="scroll-icon-mobile" v-else>
+      <img src="/img/section1/tips.gif" />
+    </div>
   </Teleport>
 </template>
 
 <script setup>
+import { isMobile } from "../utils/isMoblie.js";
+import { computed } from "vue";
+
 defineOptions({
   name: "mouse-tips",
 });
+
+const mobile = computed(() => isMobile());
 </script>
 <style>
 .scroll-icon {
@@ -39,6 +47,21 @@ defineOptions({
     animation: scroll-icon 2.2s infinite cubic-bezier(0.75, 0.05, 0.36, 1);
   }
 }
+.scroll-icon-mobile {
+  display: none;
+  position: absolute;
+  z-index: 10;
+  bottom: 0;
+  left: 50%;
+  margin-left: -1rem;
+  width: 5rem;
+  img {
+    width: 100%;
+  }
+}
+.isMobile .scroll-icon-mobile {
+  display: block;
+}
 
 @keyframes scroll-icon {
   0% {

src/components/navGuide.vue

@@ -1,19 +1,19 @@
 <template>
   <Teleport to="body">
     <ul class="nav" v-show="current > 0">
-      <li :class="{ active: isActive(1) }" @click="handleSlideTo(1)">
+      <li :class="{ active: isRangeActive(1, 2) }" @click="handleSlideTo(1)">
         <i></i>
         <div class="title">
           <h3>首页</h3>
         </div>
       </li>
-      <li :class="{ active: isActive(2) }" @click="handleSlideTo(3)">
+      <li :class="{ active: isRangeActive(2, 3) }" @click="handleSlideTo(3)">
         <i></i>
         <div class="title">
           <h3>开篇</h3>
         </div>
       </li>
-      <li :class="{ active: isActive(3) }" @click="handleSlideTo(4)">
+      <li :class="{ active: isRangeActive(3, 11) }" @click="handleSlideTo(4)">
         <i></i>
         <div class="title">
           <p>第一章</p>
@@ -21,7 +21,7 @@
         </div>
       </li>
 
-      <li :class="{ active: isActive(13) }" @click="handleSlideTo(14)">
+      <li :class="{ active: isRangeActive(13, 22) }" @click="handleSlideTo(14)">
         <i></i>
         <div class="title">
           <p>第二章</p>
@@ -29,14 +29,14 @@
         </div>
       </li>
 
-      <li :class="{ active: isActive(22) }" @click="handleSlideTo(23)">
+      <li :class="{ active: isRangeActive(22, 29) }" @click="handleSlideTo(23)">
         <i></i>
         <div class="title">
           <p>第三章</p>
           <h3>玉美神州</h3>
         </div>
       </li>
-      <li :class="{ active: isActive(29) }" @click="handleSlideTo(30)">
+      <li :class="{ active: isRangeActive(29, 40) }" @click="handleSlideTo(30)">
         <i></i>
         <div class="title">
           <h3>尾篇</h3>
@@ -46,8 +46,9 @@
   </Teleport>
 </template>
 <script setup>
-import { computed, ref, onMounted, onUnmounted, watch, watchEffect } from "vue";
+import { computed, ref, onMounted, onUnmounted } from "vue";
 import { emitter } from "../emitter.js";
+import { range } from "../utils/fn.js";
 const current = ref(0);
 const props = defineProps({
   fullpage: Object,
@@ -55,8 +56,9 @@ const props = defineProps({
 defineOptions({
   name: "nav-guide",
 });
-const isActive = computed(() => (i) => {
-  return current.value === i;
+const isRangeActive = computed(() => (i, n) => {
+  const ra = range(i, n);
+  return Array.from(ra).includes(current.value);
 });
 onMounted(() => {
   emitter.on("onLeave", (params) => {

src/pages/section.vue

@@ -1,19 +0,0 @@
-<template>
-  <div class="section">
-  </div>
-</template>
-
-<script setup></script>
-
-<style lang="scss" scoped>
-@import "/src/assets/style/index.scss";
-.section {
-  position: relative;
-  position: relative;
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-  background: no-repeat center/cover;
-  justify-content: flex-start;
-}
-</style>

src/pages/section1.vue

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

src/pages/section10.vue

@@ -31,13 +31,4 @@
 
 <style lang="scss" scoped>
 @import "/src/assets/style/index.scss";
-.section {
-  position: relative;
-  position: relative;
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-  background: no-repeat center/cover;
-  justify-content: flex-start;
-}
 </style>

src/pages/section11.vue

@@ -35,13 +35,4 @@
 
 <style lang="scss" scoped>
 @import "/src/assets/style/index.scss";
-.section {
-  position: relative;
-  position: relative;
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-  background: no-repeat center/cover;
-  justify-content: flex-start;
-}
 </style>

src/pages/section12.vue

@@ -28,13 +28,4 @@
 
 <style lang="scss" scoped>
 @import "/src/assets/style/index.scss";
-.section {
-  position: relative;
-  position: relative;
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-  background: no-repeat center/cover;
-  justify-content: flex-start;
-}
 </style>

src/pages/section13.vue

@@ -33,13 +33,5 @@
 
 <style lang="scss" scoped>
 @import "/src/assets/style/index.scss";
-.section {
-  position: relative;
-  position: relative;
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-  background: no-repeat center/cover;
-  justify-content: flex-start;
-}
+
 </style>

src/pages/section14.vue

@@ -19,13 +19,4 @@
 
 <style lang="scss" scoped>
 @import "/src/assets/style/index.scss";
-.section {
-  position: relative;
-  position: relative;
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-  background: no-repeat center/cover;
-  justify-content: flex-start;
-}
 </style>

src/pages/section15.vue

@@ -19,13 +19,4 @@
 
 <style lang="scss" scoped>
 @import "/src/assets/style/index.scss";
-.section {
-  position: relative;
-  position: relative;
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-  background: no-repeat center/cover;
-  justify-content: flex-start;
-}
 </style>

src/pages/section16.vue

@@ -30,13 +30,4 @@
 
 <style lang="scss" scoped>
 @import "/src/assets/style/index.scss";
-.section {
-  position: relative;
-  position: relative;
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-  background: no-repeat center/cover;
-  justify-content: flex-start;
-}
 </style>

src/pages/section17.vue

@@ -30,13 +30,4 @@
 
 <style lang="scss" scoped>
 @import "/src/assets/style/index.scss";
-.section {
-  position: relative;
-  position: relative;
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-  background: no-repeat center/cover;
-  justify-content: flex-start;
-}
 </style>

src/pages/section18.vue

@@ -31,13 +31,4 @@
 
 <style lang="scss" scoped>
 @import "/src/assets/style/index.scss";
-.section {
-  position: relative;
-  position: relative;
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-  background: no-repeat center/cover;
-  justify-content: flex-start;
-}
 </style>

src/pages/section19.vue

@@ -19,13 +19,4 @@
 
 <style lang="scss" scoped>
 @import "/src/assets/style/index.scss";
-.section {
-  position: relative;
-  position: relative;
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-  background: no-repeat center/cover;
-  justify-content: flex-start;
-}
 </style>

src/pages/section2.vue

@@ -20,6 +20,7 @@
 <script setup></script>
 
 <style lang="scss" scoped>
+@import "/src/assets/style/section2.css";
 .section {
   position: relative;
 }

src/pages/section20.vue

@@ -40,13 +40,4 @@
 
 <style lang="scss" scoped>
 @import "/src/assets/style/index.scss";
-.section {
-  position: relative;
-  position: relative;
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-  background: no-repeat center/cover;
-  justify-content: flex-start;
-}
 </style>

src/pages/section21.vue

@@ -36,13 +36,4 @@
 
 <style lang="scss" scoped>
 @import "/src/assets/style/index.scss";
-.section {
-  position: relative;
-  position: relative;
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-  background: no-repeat center/cover;
-  justify-content: flex-start;
-}
 </style>

src/pages/section22.vue

@@ -28,13 +28,4 @@
 
 <style lang="scss" scoped>
 @import "/src/assets/style/index.scss";
-.section {
-  position: relative;
-  position: relative;
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-  background: no-repeat center/cover;
-  justify-content: flex-start;
-}
 </style>

src/pages/section23.vue

@@ -22,13 +22,4 @@
 
 <style lang="scss" scoped>
 @import "/src/assets/style/index.scss";
-.section {
-  position: relative;
-  position: relative;
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-  background: no-repeat center/cover;
-  justify-content: flex-start;
-}
 </style>

src/pages/section24.vue

@@ -19,13 +19,4 @@
 
 <style lang="scss" scoped>
 @import "/src/assets/style/index.scss";
-.section {
-  position: relative;
-  position: relative;
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-  background: no-repeat center/cover;
-  justify-content: flex-start;
-}
 </style>

src/pages/section25.vue

@@ -25,13 +25,4 @@
 
 <style lang="scss" scoped>
 @import "/src/assets/style/index.scss";
-.section {
-  position: relative;
-  position: relative;
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-  background: no-repeat center/cover;
-  justify-content: flex-start;
-}
 </style>

src/pages/section26.vue

@@ -25,13 +25,4 @@
 
 <style lang="scss" scoped>
 @import "/src/assets/style/index.scss";
-.section {
-  position: relative;
-  position: relative;
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-  background: no-repeat center/cover;
-  justify-content: flex-start;
-}
 </style>

src/pages/section27.vue

@@ -28,13 +28,4 @@
 
 <style lang="scss" scoped>
 @import "/src/assets/style/index.scss";
-.section {
-  position: relative;
-  position: relative;
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-  background: no-repeat center/cover;
-  justify-content: flex-start;
-}
 </style>

src/pages/section28.vue

@@ -35,13 +35,4 @@
 
 <style lang="scss" scoped>
 @import "/src/assets/style/index.scss";
-.section {
-  position: relative;
-  position: relative;
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-  background: no-repeat center/cover;
-  justify-content: flex-start;
-}
 </style>

src/pages/section29.vue

@@ -28,13 +28,4 @@
 
 <style lang="scss" scoped>
 @import "/src/assets/style/index.scss";
-.section {
-  position: relative;
-  position: relative;
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-  background: no-repeat center/cover;
-  justify-content: flex-start;
-}
 </style>

src/pages/section30.vue

@@ -22,13 +22,4 @@
 
 <style lang="scss" scoped>
 @import "/src/assets/style/index.scss";
-.section {
-  position: relative;
-  position: relative;
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-  background: no-repeat center/cover;
-  justify-content: flex-start;
-}
 </style>

src/pages/section31.vue

@@ -32,13 +32,4 @@
 
 <style lang="scss" scoped>
 @import "/src/assets/style/index.scss";
-.section {
-  position: relative;
-  position: relative;
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-  background: no-repeat center/cover;
-  justify-content: flex-start;
-}
 </style>

src/pages/section4.vue

@@ -19,11 +19,7 @@
 <script setup></script>
 
 <style lang="scss">
-.section {
-  position: relative;
-  box-sizing: border-box;
-  background: no-repeat center/cover;
-}
+
 .chapter {
   justify-content: flex-start;
   background-image: url(/img/chapterunit/chapter-bg.webp);

src/pages/section5.vue

@@ -19,15 +19,6 @@
 
 <style lang="scss" scoped>
 @import "/src/assets/style/index.scss";
-.section {
-  position: relative;
-  position: relative;
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-  background: no-repeat center/cover;
-  justify-content: flex-start;
-}
 
 .unit {
   background-image: url(/img/chapterunit/unit-bg.webp);

src/pages/section6.vue

@@ -29,13 +29,4 @@
 
 <style lang="scss" scoped>
 @import "/src/assets/style/index.scss";
-.section {
-  position: relative;
-  position: relative;
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-  background: no-repeat center/cover;
-  justify-content: flex-start;
-}
 </style>

src/pages/section7.vue

@@ -19,13 +19,4 @@
 
 <style lang="scss" scoped>
 @import "/src/assets/style/index.scss";
-.section {
-  position: relative;
-  position: relative;
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-  background: no-repeat center/cover;
-  justify-content: flex-start;
-}
 </style>

src/pages/section8.vue

@@ -33,13 +33,4 @@
 
 <style lang="scss" scoped>
 @import "/src/assets/style/index.scss";
-.section {
-  position: relative;
-  position: relative;
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-  background: no-repeat center/cover;
-  justify-content: flex-start;
-}
 </style>

src/pages/section9.vue

@@ -31,13 +31,4 @@
 
 <style lang="scss" scoped>
 @import "/src/assets/style/index.scss";
-.section {
-  position: relative;
-  position: relative;
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-  background: no-repeat center/cover;
-  justify-content: flex-start;
-}
 </style>

src/utils/fn.js

@@ -56,3 +56,7 @@ export function debounce(fn, wait) {
 export function clamp(num, min, max) {
   return num <= min ? min : num >= max ? max : num;
 }
+
+export function range(start, end) {
+  return new Array(end - start).fill().map((d, i) => i + start);
+}