fullpage-show/src/pages/section5.vue

<template>
  <div class="section unit">
    <div class="box">
          <div class="unit-num">第一单元</div>
          <div class="unit-title">万年</div>
          <div class="unit-intro">
            <p>
              遥远的洪荒时代，自然的力量巨大而神秘，华夏先民笃信万物皆有灵。在生存探索中，他们发现坚韧而温润的玉不仅是工具，更是可与天地对话的灵物。
            </p>
            <p>
              在东北乌苏里江畔的小南山，燃起了华夏大地成熟用玉的星火。由此，玉器承载起中华民族对美的追求、对信仰的寄托，这是中华民族万年用玉的文明曙光。
            </p>
          </div>
        </div>
  </div>
</template>

<script setup></script>

<style lang="scss" scoped>
@import "/src/assets/style/index.css";
.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);
}
.unit .box {
  padding-top: 15vh;
  margin: 0 var(--wall-margin-left3);
  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-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.unit-num {
  color: #d09d68;
  padding: 0.5rem 1.5rem;
  border: 1px solid #d09d68;
  font-size: 1.125rem;
  margin-bottom: 2rem;
}
.unit-title {
  color: #d09d68;
  font-family: "syst-bold";
  font-size: 3rem;
}
.unit-intro {
  font-size: 1.5rem;
  line-height: 1.7;
  padding-top: 11vh;
}
.unit-intro p {
  text-indent: 2em;
  margin-bottom: 1.5rem;
}
</style>