hongze-lake-exhibition/src/views/Index/components/Chapter1/index.vue

<template>
  <div class="chapter1">
    <div class="chapter1-wrap">
      <img
        class="chapter1__title"
        draggable="false"
        src="@/assets/images/chapter1-min.png"
      />

      <div class="chapter1-card">
        <div class="chapter1-card-info">
          <img draggable="false" src="@/assets/images/chapter-img-min.png" />
          <p>{{ data.chapter1.description }}</p>
        </div>

        <div class="chapter1-card-nav">
          <p class="chapter1-card-nav-item">
            炀帝南下&nbsp;&nbsp;&nbsp;&nbsp;洪泽初名
          </p>
          <p class="chapter1-card-nav-item">
            炀帝南下&nbsp;&nbsp;&nbsp;&nbsp;洪泽初名
          </p>
          <p class="chapter1-card-nav-item">
            炀帝南下&nbsp;&nbsp;&nbsp;&nbsp;洪泽初名
          </p>
          <p class="chapter1-card-nav-item">
            炀帝南下&nbsp;&nbsp;&nbsp;&nbsp;洪泽初名
          </p>
        </div>
      </div>
    </div>

    <img class="chapter__bg" src="@/assets/images/bg/BG_02-min.jpg" />
  </div>
</template>

<script setup>
import data from "@/data.json";
</script>

<style lang="scss" scoped>
@use "./index.scss";
</style>