style: 样式

src/pages/section2.vue

@@ -0,0 +1,65 @@
+<template>
+  <div class="section section2">
+    <ul>
+      <li class="fadeInUp">
+        <h3>
+          “玉，石之美有五德：润泽以温，仁之方也；䚡理自外，可以知中，义之方也；其声舒扬，专以远闻，智之方也；不挠而折，勇之方也；锐廉而不忮，洁之方也。”
+        </h3>
+        <p>——汉 许慎《说文解字》</p>
+      </li>
+      <li class="fadeInUp">
+        <h3>
+          “在全世界文化体系里，唯有华夏文明有尊玉爱玉的传统，且8000多年未曾中断。其中不仅有深厚的华夏文化背景，更隐喻着中国文化发展的客观规律，研究和推广玉文化，是关系到中华民族生死存亡的大事。”
+        </h3>
+        <p>——费孝通</p>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script setup></script>
+
+<style lang="scss">
+.section {
+  position: relative;
+}
+.section2 {
+  display: flex;
+  flex-flow: column;
+  align-items: center;
+  line-height: 2;
+  color: #997946;
+  justify-content: center;
+  background: url(/img/section2/bg.webp) no-repeat center/cover;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  ul {
+    li {
+      list-style-type: none;
+      position: relative;
+      &:first-child:after {
+        content: "";
+        position: absolute;
+        width: 100%;
+        height: 2px;
+        bottom: 0;
+        left: 0;
+        background: url(/img/section2/line.webp) no-repeat center/contain;
+      }
+      h3 {
+        font-size: 1.5rem;
+        padding: 0 var(--wall-margin-left3);
+        padding-top: 5.875rem;
+      }
+      p {
+        text-align: right;
+        font-size: 1.5rem;
+        padding: 0 var(--wall-margin-left3);
+        padding-bottom: 5.875rem;
+      }
+    }
+  }
+}
+</style>

src/pages/section3.vue

@@ -0,0 +1,87 @@
+<template>
+  <div class="section section3">
+    <div class="slimScrollDiv" style="position: relative; overflow: hidden; width: auto; height: 919px;"><div class="fp-scrollable" style="overflow: hidden; width: auto; height: 919px;">
+        <div class="wwmap hide active" id="videocont-map">
+          <img src="./img/map/map-rnsys.webp" alt="">
+        </div>
+        <div class="wwintrobox wwintrobox-shadow hide active" id="videocont1-1">
+          <div class="wwtitle">人鸟兽玉饰</div>
+          <div class="wwintro">
+            原本湖绿色<b>玉质</b>在埋藏千年后<br>已焕发出带有<b>柔和光泽</b>的<br><b>白色斑纹</b>。
+          </div>
+        </div>
+
+        <div class="wwinfobox hide active" id="videocont1-2">
+          <div class="wwinfo">良渚文化早期</div>
+          <div class="wwinfo">南京博物院藏</div>
+          <div class="wwinfo">
+            端饰长5.5厘米，宽1.3厘米，厚0.2厘米-0.4厘米，孔径0.3厘米
+          </div>
+          <div class="wwinfo">1991年江苏省昆山市赵陵山遗址出土</div>
+        </div>
+        <div class="wwintrobox wwintrobox-shadow hide" id="videocont1-3">
+          <div class="wwtitle2">飞鸟</div>
+          <div class="wwintro3">
+            飞鸟悠闲驻足于一位跪状显贵者长长的发冠上；鸟的身下，人双手举托起的四足短尾小兽奋力向上攀爬。鸟，遨游云端，上下翻飞，先民深信它们是通天的生灵；
+          </div>
+        </div>
+        <div class="wwintrobox wwintrobox-shadow hide" id="videocont1-4">
+          <div class="wwtitle2">兽</div>
+          <div class="wwintro3">兽，奔跑原野，下穿三泉，是大地的主人；</div>
+        </div>
+        <div class="wwintrobox wwintrobox-shadow hide" id="videocont1-5">
+          <div class="wwtitle2">人</div>
+          <div class="wwintro3">
+            人，立于天地之间，与生俱来地拥有智慧而承担起沟通天地的桥梁。
+          </div>
+        </div>
+      </div><div class="slimScrollBar" style="background: rgb(0, 0, 0); width: 10px; position: absolute; top: 444px; opacity: 0.4; display: block; border-radius: 7px; z-index: 99; right: 1px; height: 30px;"></div><div class="slimScrollRail" style="width: 10px; height: 100%; position: absolute; top: 0px; display: none; border-radius: 7px; background: rgb(51, 51, 51); opacity: 0.2; z-index: 90; right: 1px;"></div></div>
+  </div>
+</template>
+
+<script setup></script>
+
+<style lang="scss">
+.section {
+  position: relative;
+}
+.section2 {
+  display: flex;
+  flex-flow: column;
+  align-items: center;
+  line-height: 2;
+  color: #997946;
+  justify-content: center;
+  background: url(/img/section2/bg.webp) no-repeat center/cover;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  ul {
+    li {
+      list-style-type: none;
+      position: relative;
+      &:first-child:after {
+        content: "";
+        position: absolute;
+        width: 100%;
+        height: 2px;
+        bottom: 0;
+        left: 0;
+        background: url(/img/section2/line.webp) no-repeat center/contain;
+      }
+      h3 {
+        font-size: 1.5rem;
+        padding: 0 var(--wall-margin-left3);
+        padding-top: 5.875rem;
+      }
+      p {
+        text-align: right;
+        font-size: 1.5rem;
+        padding: 0 var(--wall-margin-left3);
+        padding-bottom: 5.875rem;
+      }
+    }
+  }
+}
+</style>

src/style.scss

@@ -1,8 +1,11 @@
+@import "../src/assets/style/animate.css";
+@import "../src/assets/style/reset.css";
 :root {
   font-synthesis: none;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  --wall-margin-left3: 28vw
 }
 html {
   font-size: 16px;

src/view/index.vue

@@ -1,24 +1,24 @@
 <template>
   <section1></section1>
+  <section2 />
+  <section3 />
   <div class="section fp-noscroll">
-    <button class="prev">Prev</button>
     Section 2
   </div>
   <div class="section">
-    <button class="prev">Prev</button>
     Section 3
   </div>
   <div class="section">
-    <button class="prev">Prev</button>
     Section 4
   </div>
   <div class="section">
-    <button class="prev">Prev</button>
     Section 5
   </div>
 </template>
 <script setup>
 import Section1 from "../pages/section1.vue";
+import Section2 from "../pages/section2.vue";
+import Section3 from "../pages/section3.vue";
 defineOptions({
   name: "View",
 });