feat: 保存

src/assets/style/index.css

@@ -192,9 +192,9 @@ body {
   animation-delay: 0.3s;
 }
 
-.wapbody .chapter-title {
-  font-family: "simsun";
-}
+// .isMobile .chapter-title {
+//   font-family: "simsun";
+// }
 
 .chapter {
   background-image: url(/img/chapterunit/chapter-bg.webp);
@@ -237,7 +237,7 @@ body {
   margin-bottom: 1.5rem;
 }
 
-.wapbody .unit-title {
+.isMobile .unit-title {
   font-family: "simsun";
 }
 
@@ -450,62 +450,49 @@ body {
   height: auto;
 }
 
-.wapbody .chapter .box {
+.isMobile .chapter .box {
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
   padding-top: 10vh;
 }
-.wapbody .chapter-num {
-  font-size: 1.4rem;
-}
-.wapbody .chapter-title {
-  margin-right: 54vw;
-  font-size: 4rem;
-}
-.wapbody .chapter-intro {
-  padding-top: 8vh;
-  -ms-flex-preferred-size: 100%;
-  flex-basis: 100%;
-  margin-right: 0;
-  font-size: 1.5rem;
-}
-.wapbody .unit-num {
+
+.isMobile .unit-num {
   font-size: 1.4rem;
 }
-.wapbody .unit-title {
+.isMobile .unit-title {
   font-size: 4rem;
 }
-.wapbody .unit-intro {
+.isMobile .unit-intro {
   font-size: 1.5rem;
   padding-top: 8vh;
 }
-.wapbody .kefubi-2 .wwintrobox {
+.isMobile .kefubi-2 .wwintrobox {
   background-color: rgba(0, 0, 0, 0.6);
   padding: 2rem 2.5rem;
 }
-.wapbody .kefubi-2 .wwbox img {
+.isMobile .kefubi-2 .wwbox img {
   height: 100%;
   left: auto;
   margin-left: 0;
   right: 0;
 }
-.wapbody .kefufushijiezong-2 .wwbox img {
+.isMobile .kefufushijiezong-2 .wwbox img {
   height: 100%;
   right: -30%;
 }
-.wapbody .yazhang-2 .wwintrobox {
+.isMobile .yazhang-2 .wwintrobox {
   top: 18vh;
 }
-.wapbody .yuzupei-1 .wwintrobox.bottom {
+.isMobile .yuzupei-1 .wwintrobox.bottom {
   width: 42%;
   top: 24vh;
 }
-.wapbody .yuzupei-2 .wwintrobox.bottom,
-.wapbody .yuzupei-3 .wwintrobox.bottom {
+.isMobile .yuzupei-2 .wwintrobox.bottom,
+.isMobile .yuzupei-3 .wwintrobox.bottom {
   top: 10vh;
 }
-.wapbody .yuzupei-2 .wwbox img,
-.wapbody .yuzupei-3 .wwbox img {
+.isMobile .yuzupei-2 .wwbox img,
+.isMobile .yuzupei-3 .wwbox img {
   right: 50%;
   -webkit-transform: translateX(50%) !important;
   transform: translateX(50%) !important;
@@ -513,7 +500,7 @@ body {
   bottom: 28%;
   top: auto;
 }
-.wapbody .yuzupei-4 .wwbox img {
+.isMobile .yuzupei-4 .wwbox img {
   right: 50%;
   -webkit-transform: translateX(50%) !important;
   transform: translateX(50%) !important;
@@ -522,116 +509,116 @@ body {
   bottom: 28%;
   top: auto;
 }
-.wapbody .tdxryds-2 .wwbox img,
-.wapbody .tdxryds-3 .wwbox img {
+.isMobile .tdxryds-2 .wwbox img,
+.isMobile .tdxryds-3 .wwbox img {
   height: auto !important;
   width: 99%;
   bottom: 38%;
   right: 0 !important;
 }
-.wapbody .tdxryds-2 .wwinfobox .wwinfo1,
-.wapbody .tdxryds-3 .wwinfobox .wwinfo1 {
+.isMobile .tdxryds-2 .wwinfobox .wwinfo1,
+.isMobile .tdxryds-3 .wwinfobox .wwinfo1 {
   padding: 0 var(--wall-margin-left);
 }
-.wapbody .tdxryds-4 .wwbox img {
+.isMobile .tdxryds-4 .wwbox img {
   right: 7%;
   bottom: 5%;
 }
-.wapbody .yuzun-2 .wwbox img {
+.isMobile .yuzun-2 .wwbox img {
   right: 3%;
   top: 36%;
   height: auto;
   width: 150%;
 }
-.wapbody .centerimg img {
+.isMobile .centerimg img {
   height: auto !important;
   width: 156% !important;
   -webkit-transform: translateX(27vw);
   transform: translateX(27vw);
 }
-.wapbody .centerimg2 img {
+.isMobile .centerimg2 img {
   height: 40% !important;
   width: auto !important;
   right: 50% !important;
   -webkit-transform: translateX(50%) !important;
   transform: translateX(50%) !important;
 }
-.wapbody .qbyteh-1 .wwbox img {
+.isMobile .qbyteh-1 .wwbox img {
   left: -43%;
 }
-.wapbody .qbyteh-2 .wwbox img {
+.isMobile .qbyteh-2 .wwbox img {
   height: auto;
   top: 51%;
   right: 0;
   width: 180%;
 }
-.wapbody .qbyteh-2 .wwintrobox {
+.isMobile .qbyteh-2 .wwintrobox {
   top: 27vh;
 }
-.wapbody .qbyteh-3 .wwbox img {
+.isMobile .qbyteh-3 .wwbox img {
   height: auto;
   width: 200%;
   top: 0;
   left: -51%;
 }
-.wapbody .qbyteh-3 .wwintrobox {
+.isMobile .qbyteh-3 .wwintrobox {
   top: auto;
   bottom: 12vh;
 }
-.wapbody .yushenmian-2 .wwintrobox {
+.isMobile .yushenmian-2 .wwintrobox {
   height: auto;
   top: 10vh;
 }
-.tshdzb-1 .wapbody > .box .wwbox img {
+.tshdzb-1 .isMobile > .box .wwbox img {
   left: -54%;
 }
-.wapbody .tshdzb-2 .wwbox img {
+.isMobile .tshdzb-2 .wwbox img {
   width: 100%;
   top: 20%;
 }
-.wapbody #videocont2-2 {
+.isMobile #videocont2-2 {
   width: calc(100% - var(--wall-margin-left) * 2);
 }
-.wapbody #videocont2-2 .wwintro {
+.isMobile #videocont2-2 .wwintro {
   margin-bottom: 0.8rem;
 }
-.wapbody #videocont2-4 {
+.isMobile #videocont2-4 {
   width: calc(100% - var(--wall-margin-left) * 2);
   top: auto;
   bottom: 4%;
 }
-.wapbody #videocont2-5 {
+.isMobile #videocont2-5 {
   width: calc(100% - var(--wall-margin-left) * 2);
   top: auto;
   bottom: 4%;
 }
-.wapbody .section-erweima .ewmlist li {
+.isMobile .section-erweima .ewmlist li {
   margin: 0 2.2vw;
 }
-.wapbody .section-erweima .ewmlist img {
+.isMobile .section-erweima .ewmlist img {
   width: 10rem;
 }
-.wapbody .yushenmian-1 .wsicon {
+.isMobile .yushenmian-1 .wsicon {
   right: calc(50% - 2rem);
   left: auto;
   bottom: 27%;
 }
-.wapbody .yuzupei-2 .wsicon {
+.isMobile .yuzupei-2 .wsicon {
   left: auto;
   right: calc(50% - 2rem);
   bottom: 21%;
 }
-.wapbody .yuzupei-3 .wsicon {
+.isMobile .yuzupei-3 .wsicon {
   left: auto;
   right: calc(50% - 2rem);
   bottom: 24%;
 }
-.wapbody .yuzupei-4 .wsicon {
+.isMobile .yuzupei-4 .wsicon {
   left: auto;
   right: calc(50% - 2rem);
   bottom: 25%;
 }
-.wapbody .wwmap {
+.isMobile .wwmap {
   position: absolute;
   top: 8vh !important;
   right: 5vw;
@@ -639,63 +626,63 @@ body {
   width: auto !important;
   text-align: right;
 }
-.wapbody .wwmap#videocont-map {
+.isMobile .wwmap#videocont-map {
   top: 11.5vh !important;
 }
-.wapbody .wwmap img {
+.isMobile .wwmap img {
   width: 10rem !important;
   height: auto;
 }
-.wapbody .kefufushijiezong-1 .wwmap,
-.wapbody .tdxryds-1 .wwmap,
-.wapbody .yljbdd-1 .wwmap,
-.wapbody .cstythg-1 .wwmap,
-.wapbody .qbyteh-1 .wwmap,
-.wapbody .tshdzb-1 .wwmap {
+.isMobile .kefufushijiezong-1 .wwmap,
+.isMobile .tdxryds-1 .wwmap,
+.isMobile .yljbdd-1 .wwmap,
+.isMobile .cstythg-1 .wwmap,
+.isMobile .qbyteh-1 .wwmap,
+.isMobile .tshdzb-1 .wwmap {
   top: calc(8vh + 5.5rem) !important;
 }
-.wapbody .nav {
+.isMobile .nav {
   top: 0.6rem;
 }
-.wapbody .nav li .title h3 {
+.isMobile .nav li .title h3 {
   font-size: 1.1rem;
 }
-.wapbody .nav li i:after {
+.isMobile .nav li i:after {
   width: 1.2rem;
   height: 1.2rem;
 }
-.wapbody .nav li.active i:after {
+.isMobile .nav li.active i:after {
   width: 1.5rem;
   height: 1.5rem;
 }
-.wapbody .dialogclose-btn {
+.isMobile .dialogclose-btn {
   right: 3vw;
   top: 3.2rem;
 }
-.wapbody .dialogclose-btn.far-right {
+.isMobile .dialogclose-btn.far-right {
   right: 3vw;
 }
-.wapbody .dialogbtn.yzpdialog1 {
+.isMobile .dialogbtn.yzpdialog1 {
   left: 64%;
   bottom: 65%;
 }
-.wapbody .dialogbtn.yzpdialog2 {
+.isMobile .dialogbtn.yzpdialog2 {
   left: 64%;
   bottom: 45%;
 }
-.wapbody .dialogbtn.yzpdialog3 {
+.isMobile .dialogbtn.yzpdialog3 {
   left: 64%;
   bottom: 30%;
 }
-.wapbody .dialogbtn.ytehdialog1 {
+.isMobile .dialogbtn.ytehdialog1 {
   bottom: 64%;
   left: 42%;
 }
-.wapbody .dialogbtn.ytehdialog2 {
+.isMobile .dialogbtn.ytehdialog2 {
   bottom: 36%;
   left: 39%;
 }
-.wapbody .wwfirst > .box .wwbox.yuzun-1 img {
+.isMobile .wwfirst > .box .wwbox.yuzun-1 img {
   top: 26%;
 }
 
@@ -764,20 +751,20 @@ body {
   background: url(/img/webp/section1-title.webp) no-repeat center/contain;
 }
 
-.wapbody .section-loading p {
+.isMobile .section-loading p {
   width: 84vw;
   text-align: center;
   font-size: 1.4rem;
   color: #d09d68;
 }
-.wapbody .section-loading .icon {
+.isMobile .section-loading .icon {
   width: 84vw;
   text-align: center;
 }
-.wapbody .section-loading .icon img {
+.isMobile .section-loading .icon img {
   width: 2.5rem;
 }
-.wapbody .section-loading .section1-wwbox {
+.isMobile .section-loading .section1-wwbox {
   height: 61vh;
   margin: 4vh 7vw -6vh;
   display: -webkit-box;
@@ -788,7 +775,7 @@ body {
   -ms-flex-line-pack: end;
   align-content: flex-end;
 }
-.wapbody .section-loading .section1-wwbox .title2 {
+.isMobile .section-loading .section1-wwbox .title2 {
   background-position: top;
   background-size: 80% auto;
   background-image: url(/img/webp/section1-title.webp);
@@ -926,16 +913,16 @@ body {
   left: 51%;
 }
 
-.wapbody .dialogbtn-mid {
+.isMobile .dialogbtn-mid {
   bottom: 45% !important;
 }
-.wapbody .dialogbtn-top {
+.isMobile .dialogbtn-top {
   bottom: 66% !important;
 }
-.wapbody .dialogbtn-right {
+.isMobile .dialogbtn-right {
   left: 81% !important;
 }
-.wapbody .dialogbtn.kfbdialog {
+.isMobile .dialogbtn.kfbdialog {
   bottom: 60%;
   left: 46%;
 }
@@ -980,7 +967,7 @@ body {
   left: 14%;
 }
 
-.wapbody .cstythg-1.wwfirst > .box .wwbox {
+.isMobile .cstythg-1.wwfirst > .box .wwbox {
   left: 0;
 }
 

src/components/imgLoading.vue

@@ -78,7 +78,7 @@ function genetateTasks(list,pageSize,pageNum){
 // emitter.emit("preBaseLoadingdone");
 </script>
 <style lang="scss" scoped>
-@import "/src/assets/style/index.css";
+@import "/src/assets/style/index.scss";
 .icon {
     width: 25px;
     height: 25px;

src/components/navGuide.vue

@@ -13,7 +13,6 @@
           <h3>开篇</h3>
         </div>
       </li>
-
       <li :class="{ active: isActive(3) }" @click="handleSlideTo(4)">
         <i></i>
         <div class="title">
@@ -37,7 +36,6 @@
           <h3>玉美神州</h3>
         </div>
       </li>
-
       <li :class="{ active: isActive(29) }" @click="handleSlideTo(30)">
         <i></i>
         <div class="title">
@@ -83,7 +81,7 @@ const handleSlideTo = (index) => {
 };
 </script>
 <style lang="scss" scoped>
-@import "/src/assets/style/index.css";
+@import "/src/assets/style/index.scss";
 .nav {
   position: fixed;
   left: 1rem;
@@ -162,15 +160,17 @@ const handleSlideTo = (index) => {
 }
 .isMobile .nav {
   top: 0.6rem;
-
-  transform: none;
+  left: 6rem;
   right: 1rem;
+  transform: none;
   text-align: center;
+  list-style: none;
+  width: auto;
+
   li {
     margin-right: 10vw;
     margin-bottom: 0;
     display: inline-block;
-    -webkit-box-pack: center;
     .title {
       top: 0;
       padding-left: 0;

src/pages/section.vue

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

src/pages/section10.vue

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

src/pages/section11.vue

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

src/pages/section12.vue

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

src/pages/section13.vue

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

src/pages/section14.vue

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

src/pages/section15.vue

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

src/pages/section16.vue

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

src/pages/section17.vue

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

src/pages/section18.vue

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

src/pages/section19.vue

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

src/pages/section20.vue

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

src/pages/section21.vue

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

src/pages/section22.vue

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

src/pages/section23.vue

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

src/pages/section24.vue

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

src/pages/section25.vue

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

src/pages/section26.vue

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

src/pages/section27.vue

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

src/pages/section28.vue

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

src/pages/section29.vue

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

src/pages/section3.vue

@@ -185,7 +185,7 @@ const onPlayerScroll = (event, type) => {
 </script>
 
 <style lang="scss" scoped>
-@import "/src/assets/style/index.css";
+@import "/src/assets/style/index.scss";
 
 #canvas {
   position: absolute;

src/pages/section30.vue

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

src/pages/section31.vue

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

src/pages/section4.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="section section4 chapter" >
+  <div class="section section4 chapter">
     <div class="box">
       <div class="chapter-num">第一章</div>
       <div class="chapter-title">玉生华夏</div>
@@ -18,13 +18,9 @@
 
 <script setup></script>
 
-<style lang="scss" scoped>
-@import "/src/assets/style/index.css";
+<style lang="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;
 }
@@ -32,13 +28,9 @@
   justify-content: flex-start;
   background-image: url(/img/chapterunit/chapter-bg.webp);
   .box {
-    display: -webkit-box;
-    display: -ms-flexbox;
     display: flex;
     padding-top: 15vh;
     margin: 0 var(--wall-margin-left2);
-    -webkit-box-pack: justify;
-    -ms-flex-pack: justify;
     justify-content: space-between;
   }
   .chapter-num {
@@ -69,4 +61,21 @@
     }
   }
 }
+.isMobile {
+  .chapter {
+    .chapter-num {
+      // font-size: 1.4rem;
+    }
+    .chapter-title {
+      margin-right: 54vw;
+      font-size: 4rem;
+    }
+    .chapter-intro {
+      padding-top: 8vh;
+      flex-basis: 100%;
+      margin-right: 0;
+      font-size: 1.5rem;
+    }
+  }
+}
 </style>

src/pages/section5.vue

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

src/pages/section6.vue

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

src/pages/section7.vue

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

src/pages/section8.vue

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

src/pages/section9.vue

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

src/style.scss

@@ -11,7 +11,6 @@
   font-style: normal;
 }
 @import "../src/assets/style/animate.css";
-@import "../src/assets/style/reset.scss";
 
 :root {
   font-synthesis: none;
@@ -55,3 +54,6 @@ body {
     font-size: 10px;
   }
 }
+
+@import "../src/assets/style/reset.scss";
+@import "../src/assets/style/index.scss";