feat: 保存

src/assets/style/index.scss

@@ -705,15 +705,10 @@ body {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-  -ms-flex-flow: column;
   flex-flow: column;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
+
   align-items: center;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
+
   justify-content: center;
 }
 .section-loading p {
@@ -770,15 +765,13 @@ body {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-  -ms-flex-wrap: wrap;
   flex-wrap: wrap;
-  -ms-flex-line-pack: end;
   align-content: flex-end;
 }
 .isMobile .section-loading .section1-wwbox .title2 {
   background-position: top;
   background-size: 80% auto;
-  background-image: url(/img/webp/section1-title.webp);
+  background-image: url(/img/section1/section1-title-mobile.webp);
 }
 
 .dialoghide {
@@ -807,47 +800,6 @@ body {
   background: url(../img/close-btn.png) no-repeat center/cover;
 }
 
-@-webkit-keyframes scale {
-  0% {
-    -webkit-transform: scale(0.4);
-    transform: scale(0.4);
-  }
-  50% {
-    -webkit-transform: scale(1);
-    transform: scale(1);
-  }
-  75% {
-    -webkit-transform: scale(1);
-    transform: scale(1);
-  }
-  78% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 0;
-  }
-}
-
-@keyframes scale {
-  0% {
-    -webkit-transform: scale(0.4);
-    transform: scale(0.4);
-  }
-  50% {
-    -webkit-transform: scale(1);
-    transform: scale(1);
-  }
-  75% {
-    -webkit-transform: scale(1);
-    transform: scale(1);
-  }
-  78% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 0;
-  }
-}
 .dialogbtn {
   position: absolute;
   bottom: -3.4rem;

src/assets/style/keyframe.scss

@@ -0,0 +1,232 @@
+@keyframes scale {
+  0% {
+    -webkit-transform: scale(0.4);
+    transform: scale(0.4);
+  }
+  50% {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+  }
+  75% {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+  }
+  78% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+@keyframes rotate {
+  0% {
+    opacity: 1;
+    -webkit-transform: rotate(0);
+    transform: rotate(0);
+  }
+  to {
+    opacity: 1;
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+@keyframes rotate1 {
+  0% {
+    opacity: 0;
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+  to {
+    opacity: 1;
+    -webkit-transform: rotate(0);
+    transform: rotate(0);
+  }
+}
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+  to {
+    opacity: 1;
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+@keyframes fadeInUp-little {
+  0% {
+    opacity: 0;
+    -webkit-transform: translate3d(0, 5%, 0);
+    transform: translate3d(0, 5%, 0);
+  }
+  to {
+    opacity: 1;
+    -webkit-transform: none;
+    transform: none;
+  }
+}
+@keyframes fadeInDown-little {
+  0% {
+    opacity: 0;
+    -webkit-transform: translate3d(0, -5%, 0);
+    transform: translate3d(0, -5%, 0);
+  }
+  to {
+    opacity: 1;
+    -webkit-transform: none;
+    transform: none;
+  }
+}
+@keyframes fadeInLeft-little {
+  0% {
+    opacity: 0;
+    -webkit-transform: translate3d(10%, 0, 0);
+    transform: translate3d(10%, 0, 0);
+  }
+  to {
+    opacity: 1;
+    -webkit-transform: none;
+    transform: none;
+  }
+}
+@keyframes fadeInRight-little {
+  0% {
+    opacity: 0;
+    -webkit-transform: translate3d(-10%, 0, 0);
+    transform: translate3d(-10%, 0, 0);
+  }
+  to {
+    opacity: 1;
+    -webkit-transform: none;
+    transform: none;
+  }
+}
+@keyframes activedown-upin {
+  0% {
+    opacity: 0;
+    -webkit-transform: translate3d(0, 10vh, 0);
+    transform: translate3d(0, 10vh, 0);
+  }
+  to {
+    opacity: 1;
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+}
+@keyframes activedown-leftin {
+  0% {
+    opacity: 0;
+    -webkit-transform: translate3d(10%, 0, 0);
+    transform: translate3d(10%, 0, 0);
+  }
+  to {
+    opacity: 1;
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+}
+@keyframes down-upout {
+  0% {
+    opacity: 1;
+    margin-top: 0;
+  }
+  to {
+    opacity: 0;
+    margin-top: -10vh;
+  }
+}
+@keyframes activeup-downin {
+  0% {
+    opacity: 0;
+    -webkit-transform: translate3d(0, -10vh, 0);
+    transform: translate3d(0, -10vh, 0);
+  }
+  to {
+    opacity: 1;
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+}
+@keyframes up-downout {
+  0% {
+    opacity: 1;
+    margin-top: 0;
+  }
+  to {
+    opacity: 0;
+    margin-top: 10vh;
+  }
+}
+@keyframes PnBGOBaC {
+  0% {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+  }
+  50% {
+    -webkit-transform: scale(0.75);
+    transform: scale(0.75);
+  }
+  100% {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+  }
+}
+@keyframes section1-fadeIn {
+  0% {
+    opacity: 0.5;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes section1-fadeInUp {
+  0% {
+    opacity: 0.5;
+    -webkit-transform: translateY(10%);
+    transform: translateY(10%);
+  }
+  to {
+    opacity: 1;
+    -webkit-transform: translateY(0);
+    transform: translateY(0);
+  }
+}
+@keyframes section1-fadeInDown {
+  0% {
+    opacity: 0.5;
+    -webkit-transform: translateY(0);
+    transform: translateY(0);
+  }
+  to {
+    opacity: 1;
+    -webkit-transform: translateY(10%);
+    transform: translateY(10%);
+  }
+}
+
+@keyframes section1-fadeInUp-little {
+  0% {
+    opacity: 0.1;
+    -webkit-transform: translateY(3%);
+    transform: translateY(3%);
+  }
+  to {
+    opacity: 1;
+    -webkit-transform: translateY(0);
+    transform: translateY(0);
+  }
+}
+@keyframes section1-fadeInUp {
+  0% {
+    opacity: 0.5;
+    -webkit-transform: translateY(10%);
+    transform: translateY(10%);
+  }
+  to {
+    opacity: 1;
+    -webkit-transform: translateY(0);
+    transform: translateY(0);
+  }
+}

src/assets/style/reset.scss

@@ -147,315 +147,6 @@ b {
   background-color: #969696;
 }
 
-@-webkit-keyframes rotate {
-  0% {
-    opacity: 1;
-    -webkit-transform: rotate(0);
-    transform: rotate(0);
-  }
-  to {
-    opacity: 1;
-    -webkit-transform: rotate(360deg);
-    transform: rotate(360deg);
-  }
-}
-
-@keyframes rotate {
-  0% {
-    opacity: 1;
-    -webkit-transform: rotate(0);
-    transform: rotate(0);
-  }
-  to {
-    opacity: 1;
-    -webkit-transform: rotate(360deg);
-    transform: rotate(360deg);
-  }
-}
-@-webkit-keyframes rotate1 {
-  0% {
-    opacity: 0;
-    -webkit-transform: rotate(360deg);
-    transform: rotate(360deg);
-  }
-  to {
-    opacity: 1;
-    -webkit-transform: rotate(0);
-    transform: rotate(0);
-  }
-}
-@keyframes rotate1 {
-  0% {
-    opacity: 0;
-    -webkit-transform: rotate(360deg);
-    transform: rotate(360deg);
-  }
-  to {
-    opacity: 1;
-    -webkit-transform: rotate(0);
-    transform: rotate(0);
-  }
-}
-@-webkit-keyframes fadeIn {
-  0% {
-    opacity: 0;
-    -webkit-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0);
-  }
-  to {
-    opacity: 1;
-    -webkit-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0);
-  }
-}
-@keyframes fadeIn {
-  0% {
-    opacity: 0;
-    -webkit-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0);
-  }
-  to {
-    opacity: 1;
-    -webkit-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0);
-  }
-}
-@-webkit-keyframes fadeInUp-little {
-  0% {
-    opacity: 0;
-    -webkit-transform: translate3d(0, 5%, 0);
-    transform: translate3d(0, 5%, 0);
-  }
-  to {
-    opacity: 1;
-    -webkit-transform: none;
-    transform: none;
-  }
-}
-@keyframes fadeInUp-little {
-  0% {
-    opacity: 0;
-    -webkit-transform: translate3d(0, 5%, 0);
-    transform: translate3d(0, 5%, 0);
-  }
-  to {
-    opacity: 1;
-    -webkit-transform: none;
-    transform: none;
-  }
-}
-@-webkit-keyframes fadeInDown-little {
-  0% {
-    opacity: 0;
-    -webkit-transform: translate3d(0, -5%, 0);
-    transform: translate3d(0, -5%, 0);
-  }
-  to {
-    opacity: 1;
-    -webkit-transform: none;
-    transform: none;
-  }
-}
-@keyframes fadeInDown-little {
-  0% {
-    opacity: 0;
-    -webkit-transform: translate3d(0, -5%, 0);
-    transform: translate3d(0, -5%, 0);
-  }
-  to {
-    opacity: 1;
-    -webkit-transform: none;
-    transform: none;
-  }
-}
-@-webkit-keyframes fadeInLeft-little {
-  0% {
-    opacity: 0;
-    -webkit-transform: translate3d(10%, 0, 0);
-    transform: translate3d(10%, 0, 0);
-  }
-  to {
-    opacity: 1;
-    -webkit-transform: none;
-    transform: none;
-  }
-}
-@keyframes fadeInLeft-little {
-  0% {
-    opacity: 0;
-    -webkit-transform: translate3d(10%, 0, 0);
-    transform: translate3d(10%, 0, 0);
-  }
-  to {
-    opacity: 1;
-    -webkit-transform: none;
-    transform: none;
-  }
-}
-@-webkit-keyframes fadeInRight-little {
-  0% {
-    opacity: 0;
-    -webkit-transform: translate3d(-10%, 0, 0);
-    transform: translate3d(-10%, 0, 0);
-  }
-  to {
-    opacity: 1;
-    -webkit-transform: none;
-    transform: none;
-  }
-}
-@keyframes fadeInRight-little {
-  0% {
-    opacity: 0;
-    -webkit-transform: translate3d(-10%, 0, 0);
-    transform: translate3d(-10%, 0, 0);
-  }
-  to {
-    opacity: 1;
-    -webkit-transform: none;
-    transform: none;
-  }
-}
-@-webkit-keyframes activedown-upin {
-  0% {
-    opacity: 0;
-    -webkit-transform: translate3d(0, 10vh, 0);
-    transform: translate3d(0, 10vh, 0);
-  }
-  to {
-    opacity: 1;
-    -webkit-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0);
-  }
-}
-@keyframes activedown-upin {
-  0% {
-    opacity: 0;
-    -webkit-transform: translate3d(0, 10vh, 0);
-    transform: translate3d(0, 10vh, 0);
-  }
-  to {
-    opacity: 1;
-    -webkit-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0);
-  }
-}
-@-webkit-keyframes activedown-leftin {
-  0% {
-    opacity: 0;
-    -webkit-transform: translate3d(10%, 0, 0);
-    transform: translate3d(10%, 0, 0);
-  }
-  to {
-    opacity: 1;
-    -webkit-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0);
-  }
-}
-@keyframes activedown-leftin {
-  0% {
-    opacity: 0;
-    -webkit-transform: translate3d(10%, 0, 0);
-    transform: translate3d(10%, 0, 0);
-  }
-  to {
-    opacity: 1;
-    -webkit-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0);
-  }
-}
-@-webkit-keyframes down-upout {
-  0% {
-    opacity: 1;
-    margin-top: 0;
-  }
-  to {
-    opacity: 0;
-    margin-top: -10vh;
-  }
-}
-@keyframes down-upout {
-  0% {
-    opacity: 1;
-    margin-top: 0;
-  }
-  to {
-    opacity: 0;
-    margin-top: -10vh;
-  }
-}
-@-webkit-keyframes activeup-downin {
-  0% {
-    opacity: 0;
-    -webkit-transform: translate3d(0, -10vh, 0);
-    transform: translate3d(0, -10vh, 0);
-  }
-  to {
-    opacity: 1;
-    -webkit-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0);
-  }
-}
-@keyframes activeup-downin {
-  0% {
-    opacity: 0;
-    -webkit-transform: translate3d(0, -10vh, 0);
-    transform: translate3d(0, -10vh, 0);
-  }
-  to {
-    opacity: 1;
-    -webkit-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0);
-  }
-}
-@-webkit-keyframes up-downout {
-  0% {
-    opacity: 1;
-    margin-top: 0;
-  }
-  to {
-    opacity: 0;
-    margin-top: 10vh;
-  }
-}
-@keyframes up-downout {
-  0% {
-    opacity: 1;
-    margin-top: 0;
-  }
-  to {
-    opacity: 0;
-    margin-top: 10vh;
-  }
-}
-@-webkit-keyframes PnBGOBaC {
-  0% {
-    -webkit-transform: scale(1);
-    transform: scale(1);
-  }
-  50% {
-    -webkit-transform: scale(0.75);
-    transform: scale(0.75);
-  }
-  100% {
-    -webkit-transform: scale(1);
-    transform: scale(1);
-  }
-}
-@keyframes PnBGOBaC {
-  0% {
-    -webkit-transform: scale(1);
-    transform: scale(1);
-  }
-  50% {
-    -webkit-transform: scale(0.75);
-    transform: scale(0.75);
-  }
-  100% {
-    -webkit-transform: scale(1);
-    transform: scale(1);
-  }
-}
 .websum {
   position: fixed;
   opacity: 0;

src/assets/style/section1.css

@@ -1,415 +0,0 @@
-.section1 {
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    -webkit-box-orient: vertical;
-    -webkit-box-direction: normal;
-        -ms-flex-flow: column;
-            flex-flow: column;
-    -webkit-box-align: center;
-        -ms-flex-align: center;
-            align-items: center;
-    -webkit-box-pack: center;
-        -ms-flex-pack: center;
-            justify-content: center;
-    background: url(../img/webp/section1/bg.webp) no-repeat center/cover;
-  }
-  .section1 .logo,
-  .section1 .title1,
-  .section1 .section1-wwbox img,
-  .section1 .section1-wwbox .title2,
-  .section1 .txt1,
-  .section1 .txt2,
-  .section1 .txt3 {
-    opacity: 0;
-  }
-  .section1 .logo {
-    z-index: 1;
-    width: 6rem;
-    height: 6.375rem;
-    margin-bottom: 1.5rem;
-    display: block;
-    background: url(/img/section1/logo.webp) no-repeat center/cover;
-  }
-  .section1 .title1 {
-    z-index: 1;
-    font-size: 0.8rem;
-    color: #997946;
-    letter-spacing: 0.5rem;
-    -webkit-transform: translate3d(0, -3%, 0);
-            transform: translate3d(0, -3%, 0);
-  }
-  .section1 .section1-wwbox {
-    position: relative;
-    height: min(44rem, 70vh);
-    margin: -4rem 0 -6rem;
-    text-align: center;
-    -webkit-transform: translate3d(0, -3%, 0);
-            transform: translate3d(0, -3%, 0);
-  }
-  .section1 .section1-wwbox img {
-    z-index: 1;
-    position: relative;
-    max-width: 100%;
-    max-height: 100%;
-  }
-  .section1 .section1-wwbox .title2 {
-    z-index: 2;
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: url(#/img/section1/section1-title.webp) no-repeat center/contain;
-  }
-  .section1 .txt {
-    text-align: center;
-  }
-  .section1 .txt1 {
-    font-size: 2rem;
-    color: #ebeae3;
-    margin-bottom: 1rem;
-    letter-spacing: 0.2rem;
-  }
-  .section1 .txt2 {
-    font-size: 1.5rem;
-    color: #d09d68;
-  }
-  .section1 .txt3 {
-    font-size: 0.75rem;
-    color: #d09d68;
-    letter-spacing: 0.015rem;
-  }
-  .section1.active .logo,
-  .section1.active .title1,
-  .section1.active .txt1,
-  .section1.active .txt2,
-  .section1.active .txt3, .section1.down .logo,
-  .section1.down .title1,
-  .section1.down .txt1,
-  .section1.down .txt2,
-  .section1.down .txt3, .section1.up .logo,
-  .section1.up .title1,
-  .section1.up .txt1,
-  .section1.up .txt2,
-  .section1.up .txt3 {
-    -webkit-animation: section1-fadeInUp 0.8s 0.5s forwards;
-    animation: section1-fadeInUp 0.8s 0.5s forwards;
-  }
-  .section1.active .section1-wwbox img, .section1.down .section1-wwbox img, .section1.up .section1-wwbox img {
-    -webkit-animation: section1-fadeInUp-little 1.5s 0.8s forwards;
-    animation: section1-fadeInUp-little 1.5s 0.8s forwards;
-  }
-  .section1.active .section1-wwbox .title2, .section1.down .section1-wwbox .title2, .section1.up .section1-wwbox .title2 {
-    -webkit-animation: section1-fadeIn 1.2s 1s forwards;
-    animation: section1-fadeIn 1.2s 1s forwards;
-  }
-  .section1.active .title1, .section1.down .title1, .section1.up .title1 {
-    -webkit-animation-delay: 0.6s;
-    animation-delay: 0.6s;
-  }
-  .section1.active .txt1, .section1.down .txt1, .section1.up .txt1 {
-    -webkit-animation-delay: 0.9s;
-    animation-delay: 0.9s;
-  }
-  .section1.active .txt2, .section1.down .txt2, .section1.up .txt2 {
-    -webkit-animation-delay: 1s;
-    animation-delay: 1s;
-  }
-  .section1.active .txt3, .section1.down .txt3, .section1.up .txt3 {
-    -webkit-animation-delay: 1.1s;
-    animation-delay: 1.1s;
-  }
-  
-  @-webkit-keyframes section1-fadeIn {
-    0% {
-      opacity: 0.5;
-    }
-    to {
-      opacity: 1;
-    }
-  }
-  
-  @keyframes section1-fadeIn {
-    0% {
-      opacity: 0.5;
-    }
-    to {
-      opacity: 1;
-    }
-  }
-  @-webkit-keyframes section1-fadeInUp-little {
-    0% {
-      opacity: 0.1;
-      -webkit-transform: translateY(3%);
-              transform: translateY(3%);
-    }
-    to {
-      opacity: 1;
-      -webkit-transform: translateY(0);
-              transform: translateY(0);
-    }
-  }
-  @keyframes section1-fadeInUp-little {
-    0% {
-      opacity: 0.1;
-      -webkit-transform: translateY(3%);
-              transform: translateY(3%);
-    }
-    to {
-      opacity: 1;
-      -webkit-transform: translateY(0);
-              transform: translateY(0);
-    }
-  }
-  @-webkit-keyframes section1-fadeInUp {
-    0% {
-      opacity: 0.5;
-      -webkit-transform: translateY(10%);
-              transform: translateY(10%);
-    }
-    to {
-      opacity: 1;
-      -webkit-transform: translateY(0);
-              transform: translateY(0);
-    }
-  }
-  @keyframes section1-fadeInUp {
-    0% {
-      opacity: 0.5;
-      -webkit-transform: translateY(10%);
-              transform: translateY(10%);
-    }
-    to {
-      opacity: 1;
-      -webkit-transform: translateY(0);
-              transform: translateY(0);
-    }
-  }
-  @-webkit-keyframes section1-fadeInDown {
-    0% {
-      opacity: 0.5;
-      -webkit-transform: translateY(0);
-              transform: translateY(0);
-    }
-    to {
-      opacity: 1;
-      -webkit-transform: translateY(10%);
-              transform: translateY(10%);
-    }
-  }
-  @keyframes section1-fadeInDown {
-    0% {
-      opacity: 0.5;
-      -webkit-transform: translateY(0);
-              transform: translateY(0);
-    }
-    to {
-      opacity: 1;
-      -webkit-transform: translateY(10%);
-              transform: translateY(10%);
-    }
-  }
-  .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/assets/style/section1.scss

@@ -0,0 +1,338 @@
+// @import "./keyframe.scss";
+
+.section1 {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -ms-flex-flow: column;
+  flex-flow: column;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  background: url(../img/webp/section1/bg.webp) no-repeat center/cover;
+}
+.section1 .logo,
+.section1 .title1,
+.section1 .section1-wwbox img,
+.section1 .section1-wwbox .title2,
+.section1 .txt1,
+.section1 .txt2,
+.section1 .txt3 {
+  opacity: 0;
+}
+.section1 .logo {
+  z-index: 1;
+  width: 6rem;
+  height: 6.375rem;
+  margin-bottom: 1.5rem;
+  display: block;
+  background: url(/img/section1/logo.webp) no-repeat center/cover;
+}
+.section1 .title1 {
+  z-index: 1;
+  font-size: 0.8rem;
+  color: #997946;
+  letter-spacing: 0.5rem;
+  -webkit-transform: translate3d(0, -3%, 0);
+  transform: translate3d(0, -3%, 0);
+}
+.section1 .section1-wwbox {
+  position: relative;
+  height: min(44rem, 70vh);
+  margin: -4rem 0 -6rem;
+  text-align: center;
+  -webkit-transform: translate3d(0, -3%, 0);
+  transform: translate3d(0, -3%, 0);
+}
+.section1 .section1-wwbox img {
+  z-index: 1;
+  position: relative;
+  max-width: 100%;
+  max-height: 100%;
+}
+.section1 .section1-wwbox .title2 {
+  z-index: 2;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: url(/img/section1/section1-title.webp) no-repeat center/contain;
+}
+.section1 .txt {
+  text-align: center;
+}
+.section1 .txt1 {
+  font-size: 2rem;
+  color: #ebeae3;
+  margin-bottom: 1rem;
+  letter-spacing: 0.2rem;
+}
+.section1 .txt2 {
+  font-size: 1.5rem;
+  color: #d09d68;
+}
+.section1 .txt3 {
+  font-size: 0.75rem;
+  color: #d09d68;
+  letter-spacing: 0.015rem;
+}
+.section1.active .logo,
+.section1.active .title1,
+.section1.active .txt1,
+.section1.active .txt2,
+.section1.active .txt3,
+.section1.down .logo,
+.section1.down .title1,
+.section1.down .txt1,
+.section1.down .txt2,
+.section1.down .txt3,
+.section1.up .logo,
+.section1.up .title1,
+.section1.up .txt1,
+.section1.up .txt2,
+.section1.up .txt3 {
+  -webkit-animation: section1-fadeInUp 0.8s 0.5s forwards;
+  animation: section1-fadeInUp 0.8s 0.5s forwards;
+}
+.section1.active .section1-wwbox img,
+.section1.down .section1-wwbox img,
+.section1.up .section1-wwbox img {
+  -webkit-animation: section1-fadeInUp-little 1.5s 0.8s forwards;
+  animation: section1-fadeInUp-little 1.5s 0.8s forwards;
+}
+.section1.active .section1-wwbox .title2,
+.section1.down .section1-wwbox .title2,
+.section1.up .section1-wwbox .title2 {
+  -webkit-animation: section1-fadeIn 1.2s 1s forwards;
+  animation: section1-fadeIn 1.2s 1s forwards;
+}
+.section1.active .title1,
+.section1.down .title1,
+.section1.up .title1 {
+  -webkit-animation-delay: 0.6s;
+  animation-delay: 0.6s;
+}
+.section1.active .txt1,
+.section1.down .txt1,
+.section1.up .txt1 {
+  -webkit-animation-delay: 0.9s;
+  animation-delay: 0.9s;
+}
+.section1.active .txt2,
+.section1.down .txt2,
+.section1.up .txt2 {
+  -webkit-animation-delay: 1s;
+  animation-delay: 1s;
+}
+.section1.active .txt3,
+.section1.down .txt3,
+.section1.up .txt3 {
+  -webkit-animation-delay: 1.1s;
+  animation-delay: 1.1s;
+}
+/* 
+@-webkit-keyframes section1-fadeIn {
+  0% {
+    opacity: 0.5;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes section1-fadeIn {
+  0% {
+    opacity: 0.5;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@-webkit-keyframes section1-fadeInUp-little {
+  0% {
+    opacity: 0.1;
+    -webkit-transform: translateY(3%);
+    transform: translateY(3%);
+  }
+  to {
+    opacity: 1;
+    -webkit-transform: translateY(0);
+    transform: translateY(0);
+  }
+}
+@keyframes section1-fadeInUp-little {
+  0% {
+    opacity: 0.1;
+    -webkit-transform: translateY(3%);
+    transform: translateY(3%);
+  }
+  to {
+    opacity: 1;
+    -webkit-transform: translateY(0);
+    transform: translateY(0);
+  }
+}
+@-webkit-keyframes section1-fadeInUp {
+  0% {
+    opacity: 0.5;
+    -webkit-transform: translateY(10%);
+    transform: translateY(10%);
+  }
+  to {
+    opacity: 1;
+    -webkit-transform: translateY(0);
+    transform: translateY(0);
+  }
+}
+@keyframes section1-fadeInUp {
+  0% {
+    opacity: 0.5;
+    -webkit-transform: translateY(10%);
+    transform: translateY(10%);
+  }
+  to {
+    opacity: 1;
+    -webkit-transform: translateY(0);
+    transform: translateY(0);
+  }
+}
+@-webkit-keyframes section1-fadeInDown {
+  0% {
+    opacity: 0.5;
+    -webkit-transform: translateY(0);
+    transform: translateY(0);
+  }
+  to {
+    opacity: 1;
+    -webkit-transform: translateY(10%);
+    transform: translateY(10%);
+  }
+}
+@keyframes section1-fadeInDown {
+  0% {
+    opacity: 0.5;
+    -webkit-transform: translateY(0);
+    transform: translateY(0);
+  }
+  to {
+    opacity: 1;
+    -webkit-transform: translateY(10%);
+    transform: translateY(10%);
+  }
+} */
+/* .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;
+} */
+
+.video_demo {
+  position: absolute;
+  z-index: 10;
+  top: 0;
+  left: 0;
+  width: 100%;
+}
+
+.video_canvas {
+  width: 100%;
+  height: 100%;
+}
+
+.isMobile .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;
+}
+.isMobile .section1 .logo {
+  margin-top: -8vh;
+}
+.isMobile .section1 .title1 {
+  font-size: 1.2rem;
+}
+.isMobile .section1 .title2 {
+  background-position: top;
+  background-size: 80% auto;
+  background-image: url(/img/section1/section1-title-mobile.webp);
+}

src/components/imgLoading.vue

@@ -1,78 +1,85 @@
 <template>
-    <div class="section section-loading" v-if="progress != 100">
-      <div class="section1-wwbox">
-        <img src="/img/section1/section1-ww.webp" alt="" class="fadeIn">
-        <div class="title2 fadeIn"></div>
-        <div>
-          <div class="icon">
-            <img src="/img/webp/wsicon.webp" alt="">
-          </div>
-          <p id="progress-bar"><span>{{ progress }}</span>%</p>
+  <div class="section section-loading" v-if="true">
+    <div class="section1-wwbox">
+      <img src="/img/section1/section1-ww.webp" alt="" class="fadeIn" />
+      <div class="title2 fadeIn"></div>
+      <div>
+        <div class="icon">
+          <img src="/img/webp/wsicon.webp" alt="" />
         </div>
+        <p id="progress-bar">
+          <span>{{ progress }}</span
+          >%
+        </p>
       </div>
     </div>
+  </div>
 </template>
-  
+
 <script setup>
 import { onMounted, ref, watchEffect } from "vue";
 import { emitter } from "../emitter.js";
-import imgList from '../utils/loadImg'
+import { isMobile } from "../utils/isMoblie.js";
+import imgList from "../utils/loadImg";
 defineOptions({
   name: "img-loading",
 });
-onMounted(()=>{
-  loadImages(imgList)
-})
+onMounted(() => {
+  loadImages(imgList);
+});
 const props = defineProps({
   fullpage: Object,
 });
-const emit = defineEmits(['changePer'])
+const emit = defineEmits(["changePer"]);
 const progress = ref(0);
-const framePro = ref(0)
-const imgPro = ref(0)
+const framePro = ref(0);
+const imgPro = ref(0);
 watchEffect(() => {
-    if (props.fullpage && progress.value == 100) {
-        props.fullpage.api.setAllowScrolling(true);
-    }
-  });
+  if (props.fullpage && progress.value == 100) {
+    props.fullpage.api.setAllowScrolling(true);
+  }
+});
 emitter.on("updatePress", (val) => {
-    framePro.value = val * 0.7 
-    progress.value = Math.round(framePro.value + imgPro.value)
+  framePro.value = val * 0.7;
+  progress.value = Math.round(framePro.value + imgPro.value);
 });
-// 总任务 
-function loadImages(list){ 
-    const pageSize = 1 
-    let pageNum = 0 ,totalNum = list.length;
-    return new Promise((reslove,reject)=>{ 
-        function run(){ 
-            Promise.all(genetateTasks(list,pageSize,pageNum)).then(()=>{ 
-                pageNum++
-                const hasLength = pageSize * pageNum 
-                imgPro.value = Math.round((hasLength/(list.length + 1))*30)
-                progress.value = Math.round(framePro.value + imgPro.value)
-                if(totalNum > hasLength){ 
-                    run() 
-                }else { 
-                    reslove(true) 
-                } }) 
-           } 
-           run() 
- }) }
-// 子任务 
-function genetateTasks(list,pageSize,pageNum){
-    const promiseArr = [] 
-    const start = pageNum * pageSize 
-    const end = (pageNum + 1) * pageSize - 1 
-    // progress.value = 
-    for(let i = start;i<end;i++){ 
-        const p = new Promise((reslove,reject)=>{ 
-            const img = new Image() 
-            img.src = list[i] 
-            img.onload = img.onerror = reslove 
-         }) 
-         promiseArr.push(p) 
-    } 
-    return promiseArr 
+// 总任务
+function loadImages(list) {
+  const pageSize = 1;
+  let pageNum = 0,
+    totalNum = list.length;
+  return new Promise((reslove, reject) => {
+    function run() {
+      Promise.all(genetateTasks(list, pageSize, pageNum)).then(() => {
+        pageNum++;
+        const hasLength = pageSize * pageNum;
+        imgPro.value = Math.round((hasLength / (list.length + 1)) * 30);
+        progress.value = Math.round(framePro.value + imgPro.value);
+        if (totalNum > hasLength) {
+          run();
+        } else {
+          reslove(true);
+        }
+      });
+    }
+    run();
+  });
+}
+// 子任务
+function genetateTasks(list, pageSize, pageNum) {
+  const promiseArr = [];
+  const start = pageNum * pageSize;
+  const end = (pageNum + 1) * pageSize - 1;
+  // progress.value =
+  for (let i = start; i < end; i++) {
+    const p = new Promise((reslove, reject) => {
+      const img = new Image();
+      img.src = list[i];
+      img.onload = img.onerror = reslove;
+    });
+    promiseArr.push(p);
+  }
+  return promiseArr;
 }
 // emitter.on("closePreloadinng");
 // emitter.emit("preBaseLoadingdone");
@@ -80,14 +87,14 @@ function genetateTasks(list,pageSize,pageNum){
 <style lang="scss" scoped>
 @import "/src/assets/style/index.scss";
 .icon {
-    width: 25px;
-    height: 25px;
-    img {
-        width: 100%;
-    }
+  width: 25px;
+  height: 25px;
+  img {
+    width: 100%;
+  }
 }
-.text{
-    text-align: center;
+.text {
+  text-align: center;
 }
 .scroll-icon {
   opacity: 1;

src/pages/section1.vue

@@ -19,11 +19,11 @@
   </div>
 </template>
 
-<script setup>
-</script>
+<script setup></script>
 
 <style lang="scss" scoped>
-@import "/src/assets/style/section1.css";
+// @import "/src/assets/style/keyframes.scss";
+@import "../assets/style/section1.scss";
 .section {
   position: relative;
 }

src/style.scss

@@ -1,3 +1,5 @@
+@import "./assets/style/keyframe.scss";
+
 @font-face {
   font-family: "syst-regular";
   src: url("assets/syst-regular.ttf");