艺术分页

闫增涛

2024-05-31 5e84137576996f096e361d51adf05d7af5ff8084

艺术分页

 src/App.vue

@@ -70,7 +70,7 @@
        // embedded
        // english
        // artAndDance
        this.config.resourceCtx + "artAndDance"
        this.config.resourceCtx + "lifeCare"
      );
      // 测试试读30页
      // this.activeBook.tryPageCount = 10;

 src/books/artAndDance/assets/images/chapter-one-header.png

 src/books/artAndDance/assets/images/icon/boy.jpg

 src/books/artAndDance/assets/images/icon/tree(1).jpg

Binary files differ

 src/books/artAndDance/assets/main.less

@@ -169,10 +169,11 @@
    font-family: "STKaiti";
    color: #ef495d;
    font-weight: bold;
    font-size: 1.15em;
    // font-size: 1.15em;
    font-size: 26px;
    margin-top: 2em;
    text-align: center;
    margin-bottom: 2em;
    margin-bottom: 20px;
    text-indent: 0em;
  }

@@ -290,9 +291,11 @@
  }
  .block2 {
    font-family: "STKaiti";
    font-size: 1.15em;
    // font-size: 1.15em;
    font-size: 26px;
    text-align: center;
    text-indent: 0em;
    margin: 6px 0;
  }

  .bj1 {
@@ -350,6 +353,9 @@
  .ju-bt {
    justify-content: space-between;
  }
  .ju-end {
    justify-content: flex-end;
  }
  .al-cn {
    align-items: center;
  }
@@ -371,6 +377,9 @@
  .ml-40 {
    margin-left: 40px;
  }
  .mr-40 {
    margin-right: 40px;
  }
  .pg-mh {
    min-height: 1150px;
  }
@@ -380,6 +389,9 @@
  .w-min {
    width: min-content;
  }
  .w40 {
    width: 40px;
  }
}

/* 媒体查询做基础响应式布局 */

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

@@ -27,25 +27,116 @@
          <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>
            <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 class="page-box" page="6">
      <div v-if="showPageList.indexOf(6) > -1">
        <div>
          <img src="../../assets/images/chapter-one-header.png" class="w100" />
        </div>
        <div class="padding-96">
          <h3 id="c002">空间与方向</h3>
          <p class="block2">高、中空间</p>
          <p class="block2">1、2、4、8点方向</p>
          <h2 class="lefth2" id="b002">
            <img class="img-gn" alt="" src="../../assets/images/xsyty.jpg" />
          </h2>
          <video
            :src="videoPathOne"
            webkit-playsinline="true"
            x-webkit-airplay="true"
            playsinline="true"
            x5-video-orientation="h5"
            x5-video-player-fullscreen="true"
            x5-playsinline=""
            controls
            class="w100"
          ></video>
          <h3 id="c003">黄鹤楼送孟浩然之广陵</h3>
          <p class="block2">〔唐〕李白</p>
          <p class="block2">故人西辞黄鹤楼，</p>
          <p class="block2">烟花三月下扬州。</p>
          <p class="block2">孤帆远影碧空尽，</p>
          <p class="block2">唯见长江天际流。</p>
          <p class="center">
            <img class="img-g" alt="" src="image/i0007-1.jpg" />
          </p>
          <h2 class="lefth2" id="b003">
            <img class="img-gn" alt="" src="image/czysj.jpg" />
          </h2>
        </div>
        <ul>
          <li class="fl ju-end mr-40">
            <div>
              <span class="dl-ib"> 3 </span>
              <img src="../../assets/images/icon/tree.jpg" />
            </div>
          </li>
          <li>
            <img class="img-0" alt="" src="../../assets/images/ym.jpg" />
          </li>
        </ul>
      </div>
    </div>
    <div class="page-box" page="7">
      <div v-if="showPageList.indexOf(5) > -1" class="fl fl-cl ju-bt">
        <img
          src="../../assets/images/pageContentHeader.jpg"
          alt=""
          class="w100 mb-40"
        />
        <div class="padding-96">
          <div class="bj1">
            <p class="block">
              <img
                class="inline"
                alt=""
                src="../../assets/images/dn.png"
              />运用所学舞蹈元素，设立两个与好友告别的场景。
            </p>
            <p class="block">
              <img
                class="inline"
                alt=""
                src="../../assets/images/dn.png"
              />学生自愿分组，每组自行设置与送别相关的主题，在教师的引导下进行创编，并富有情感地展示出来。
            </p>
          </div>
          <h2 class="lefth2" id="b004">
            <img class="img-gn1" alt="" src="../../assets/images/tz.jpg" />
          </h2>
          <div class="bj2">
            <p class="block">
              充分理解古诗表达的情感，根据已学舞蹈元素，创编带有送别意味的单一舞蹈动作或造型吧。
            </p>
          </div>
          <p class="center"><img class="img-0" alt="" src="image/ym.jpg" /></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>
import getResourcePath from "@/assets/methods/resources";
export default {
  name: "chapterOne",
  props: {
@@ -53,6 +144,19 @@
      type: Array,
    },
  },
  mounted() {
    this.getVidoePath();
  },
  data() {
    return {
      videoPathOne: "",
    };
  },
  methods: {
    getVidoePath() {
      this.videoPathOne = getResourcePath("db8040667457cc6fc9b0209009acb316");
    },
  },
};
</script>


 src/books/lifeCare/index.vue

@@ -186,7 +186,7 @@
  },
  mounted() {
    // 默认加载章节
    this.showCatalogList = [1];
    this.showCatalogList = [8];
    // 滚动监听节流
    this.throttledScrollHandler = _.throttle(
      this.scrollFun,