From cc7bbbd9b6a859235c9985cc09836effc1157fe8 Mon Sep 17 00:00:00 2001
From: YM <479443481@qq.com>
Date: 星期五, 07 六月 2024 10:51:38 +0800
Subject: [PATCH] Merge branch 'master' of http://182.92.203.7:2001/r/testbookLayout
---
src/books/artAndDance/view/components/chapter005.vue | 243 ++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 243 insertions(+), 0 deletions(-)
diff --git a/src/books/artAndDance/view/components/chapter005.vue b/src/books/artAndDance/view/components/chapter005.vue
new file mode 100644
index 0000000..9868bb5
--- /dev/null
+++ b/src/books/artAndDance/view/components/chapter005.vue
@@ -0,0 +1,243 @@
+<template>
+ <div class="chapter" num="6">
+ <div class="page-box" page="20" style="min-height: auto">
+ <div v-if="showPageList.indexOf(20) > -1">
+ <img class="img-0" alt="" src="../../assets/images/dy5.jpg" />
+ <img
+ src="../../assets/images/10-2.gif"
+ alt=""
+ style="width: 54%"
+ class="cover-gif"
+ />
+ </div>
+ </div>
+ <div class="page-box" page="21">
+ <div v-if="showPageList.indexOf(21) > -1" class="pg-mh fl fl-cl">
+ <img
+ src="../../assets/images/pageContentHeader.jpg"
+ alt=""
+ class="w100 mb-40"
+ />
+ <div class="padding-96">
+ <ul class="fl fl-cl al-cn img-state" style="margin-top: 100px">
+ <li style="width: 45%">
+ <img
+ src="../../assets/images/crane.png"
+ alt=""
+ class="w100"
+ :style="{ opacity: (10 - num) / 10 }"
+ />
+ </li>
+ <li style="width: 35%">
+ <img
+ src="../../assets/images/rise.png"
+ alt=""
+ class="w100"
+ :style="{ opacity: num / 10 }"
+ />
+ </li>
+ </ul>
+ <p class="img">鈥滆タ濉炲北鍓嶇櫧楣鈥濆姩浣�</p>
+ </div>
+ <ul class="pb-box">
+ <li class="ml-40">
+ <img src="../../assets/images/icon/tree.jpg" />
+ <span class="dl-ib"> 18 </span>
+ </li>
+ <li>
+ <img class="img-0" alt="" src="../../assets/images/ym.jpg" />
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="page-box" page="22">
+ <div v-if="showPageList.indexOf(22) > -1">
+ <div>
+ <img
+ src="../../assets/images/chapter-five-header.png"
+ class="w100"
+ />
+ </div>
+ <div class="padding-96">
+ <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>
+ <h3 id="c002">绌洪棿涓庢柟鍚�</h3>
+ <p class="block2">楂樸�佷腑銆佷綆绌洪棿</p>
+ <p class="block2">1銆�2銆�3銆�7銆�8鐐规柟鍚�</p>
+ <h2 class="lefth2" id="b002">
+ <img class="img-gn" alt="" src="../../assets/images/xsyty.jpg" />
+ </h2>
+ <ul class="fl fl-cl al-cn audio-box">
+ <li class="fl al-cn">
+ <span class="wh-nr auido-text mr-8">鐢风闊�</span>
+ <audio :src="auidoPathOne" controls></audio>
+ </li>
+ <li class="fl al-cn mt-20">
+ <span class="wh-nr auido-text mr-8"> 濂崇闊� </span>
+ <audio :src="auidoPathTwo" controls></audio>
+ </li>
+ </ul>
+ <h3 id="c015">娓旀瓕瀛�</h3>
+ <p class="block2 fm-son">銆斿攼銆曞紶蹇楀拰</p>
+ <p class="block2 m16-0">瑗垮灞卞墠鐧介弓椋烇紝</p>
+ <p class="block2 m16-0">妗冭姳娴佹按槌滈奔鑲ャ��</p>
+ </div>
+ <ul>
+ <li class="fl ju-end mr-40">
+ <div>
+ <span class="dl-ib"> 19 </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="23">
+ <div v-if="showPageList.indexOf(23) > -1" class="pg-mh">
+ <img
+ src="../../assets/images/pageContentHeader.jpg"
+ alt=""
+ class="w100 mb-40"
+ />
+ <div class="padding-96">
+ <p class="block2 m16-0">闈掔绗狅紝缁胯搼琛ｏ紝</p>
+ <p class="block2 m16-0">鏂滈缁嗛洦涓嶉』褰掋��</p>
+ <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"
+ style="margin:38px 0"
+ ></video>
+ <h2 class="lefth2" id="b003">
+ <img class="img-gn" alt="" src="../../assets/images/czysj.jpg" />
+ </h2>
+ <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>
+ </div>
+ <ul>
+ <li class="ml-40">
+ <img src="../../assets/images/icon/tree.jpg" />
+ <span class="dl-ib"> 20 </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: "chapterFive",
+ props: {
+ showPageList: {
+ type: Array,
+ },
+ },
+ mounted() {
+ this.getVidoePath();
+ this.addNum();
+ },
+ data() {
+ return {
+ videoPathOne: "",
+ auidoPathOne: "",
+ auidoPathTwo: "",
+ num: 0,
+ };
+ },
+ unmounted() {
+ if (this.addTimer) {
+ clearInterval(this.addTimer);
+ }
+ if (this.cutTimer) {
+ clearInterval(this.cutTimer);
+ }
+ },
+ methods: {
+ async getVidoePath() {
+ this.videoPathOne = await getResourcePath(
+ "97758c885b8668f42c9df0b3ff030672"
+ );
+ this.auidoPathOne = await getResourcePath(
+ "aed4d7b398283b35df0ca46f7c0bbdd4"
+ );
+ this.auidoPathTwo = await getResourcePath(
+ "ec8b7f69df81b1d6230968ad2313132c"
+ );
+ },
+ addNum() {
+ this.addTimer = setInterval(() => {
+ if (this.num < 10) {
+ this.num++;
+ } else {
+ clearInterval(this.addTimer);
+ this.cutNum();
+ }
+ }, 200);
+ },
+ cutNum() {
+ this.cutTimer = setInterval(() => {
+ if (this.num > 0) {
+ this.num--;
+ } else {
+ clearInterval(this.cutTimer);
+ this.addNum();
+ }
+ }, 200);
+ },
+ },
+};
+</script>
+
+<style lang="less" scoped>
+.cover-gif {
+ position: absolute;
+ top: 32%;
+ left: 22%;
+}
+</style>
--
Gitblit v1.9.1