艺术分页

闫增涛

2024-05-31 72f8190d33b5e6f1b64b848048f315cf530bc6ef

 src/books/artAndDance/view/components/chapter001.vue

@@ -0,0 +1,69 @@
<template>
  <div class="chapter" num="1">
    <div class="page-box" page="4">
      <div v-if="showPageList.indexOf(4) > -1">
        <img class="img-0" alt="" src="../../assets/images/dy1.jpg" />
      </div>
    </div>
    <div class="page-box" page="5">
      <div v-if="showPageList.indexOf(5) > -1" class="pg-mh fl fl-cl ju-bt">
        <img
          src="../../assets/images/pageContentHeader.jpg"
          alt=""
          class="w100 mb-40"
        />
        <div class="padding-96">
          <p class="center">
            <img class="img-a" alt="" src="../../assets/images/image6-1.jpg" />
          </p>
          <h2 class="lefth2" id="b001">
            <img class="img-gn" alt="" src="../../assets/images/rhybx.jpg" />
          </h2>
          <h3 id="c001" class="fw-400 fz-26 mb-20">元素</h3>
          <p class="block2 fw-400 fz-26">单手挥别</p>
          <p class="block1 w70"><span class="ls fz-26">——单晃手</span></p>
          <p class="block2 fz-26">双手挥别</p>
          <p class="block1 w70"><span class="ls fz-26">——双晃手</span></p>
          <p class="block2 fz-26">配合步伐</p>
          <p class="block1 w70"><span class="ls fz-26">——上步晃手</span></p>
        </div>
        
        <ul>
          <li class="ml-40">
            <img src="../../assets/images/icon/tree.jpg" >
            <span class="dl-ib">
              2
            </span>
          </li>
          <li>
            <img class="img-0" alt="" src="../../assets/images/ym.jpg" />
          </li>
        </ul>
        
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "chapterOne",
  props: {
    showPageList: {
      type: Array,
    },
  },
};
</script>

<style lang="less" scoped>
  .w70 {
    width: 78%;
  }
  .fw-400 {
    font-weight: 400 !important;
  }
  .fz-26  {
    font-size: 26px !important;
  }
</style>